看来display: inline-block;似乎无效。我试图找到一些可以使徽标和菜单对齐的CSS。
可以帮忙吗？ ：-）
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>GBAF(Groupement Banque-Assurance Français)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
</head>
<body>
<div class="parent">
<div class="logo">
<a href="index.php">
<img src="images/logo.png" title="GBAF(Groupement Banque-Assurance Français)" alt="Le logo de GBAF(Groupement Banque-Assurance Français)." />
</a>
</div>
<div class="nomprenom">
<?php
$autorisation = false;
if ($autorisation)
{
echo "$nom $prenom";
}
else
{
?>
<nav class="menu">
<ul>
<li><a href="#">Inscription</a></li>
<li><a href="#">Connexion</a></li>
</ul>
</nav>
<?php
}
?>
</div>
<div class="enfant-un child">
<h1>Groupement Banque-Assurance Français</h1>
<p>Présentation des partenaires</p>
<img class="illustration" src="images/illustration.jpg" alt="Bureaux de GBAF(Groupement Banque-Assurance Français)."/>
</div>
<div class="enfant-deux child">
<h2>acteurs et partenaires</h2>
<p>Présentation des acteurs et partenaires</p>
<div class="acteur">
<img src="images/logo-acteur-1.png" alt="acteur 1"/>
<h3>acteur 1</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-2.png" alt="acteur 2"/>
<h3>acteur 2</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-3.png" alt="acteur 3"/>
<h3>acteur 3</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-4.png" alt="acteur 4"/>
<h3>acteur 4</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-5.png" alt="acteur 5"/>
<h3>acteur 5</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-6.png" alt="acteur 6"/>
<h3>acteur 6</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
</div>
<div class="enfant-trois child">
<nav class="menu">
<ul>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
body
{
margin: 0px;
}
.parent
{
background-color: blue;
}
.enfant-un
{
background-color: green;
}
.enfant-deux
{
background-color: red;
}
.enfant-trois
{
background-color: violet;
}
.logo
{
display: inline-block;
width: 33%;
}
.menu
{
display: inline-block;
width: 66%;
}
.illustration
{
width: 100%;
}