0
élément Nav ne sera pas complètement flotter à droite
/* Generic Styles */
body {
background: #ffffff;
color: #222222;
font: 1em;
}
.container {
\t margin: auto;
\t width: 90%;
}
img {
\t max-width: 100%;
}
/* Layout Styles */
header {
\t background-image: url(../images/rocket.png);
\t background-repeat: no-repeat;
\t background-size: contain;
\t background-position: left;
\t background-color: #003151;
}
header img {
\t float: left;
\t margin-top: 30px;
}
header h3 {
\t clear: both;
}
nav {
\t float: right;
\t width: 100%;
\t font-size: 1.250em;
\t font-weight: bold;
\t text-transform: uppercase;
\t margin-top: 62px;
\t }
nav ul {
\t list-style: none;
}
nav ul li {
\t float: left;
\t display: block;
\t margin-right: 04%;
}
nav ul li:last-child {
\t margin-right: 0;
}
nav ul li a {
\t color: #ffffff;
\t text-decoration: none;
}<header>
<div class="container">
<a href="#" title="Home page"><img src="images/logo.png" alt="Logo" /></a>
<nav>
<ul>
<li><a href="#" title="Home page" class="current">Home</a></li>
<li><a href="portfolio" title="See some of my featured work">Portfolio</a></li>
<li><a href="services" title="Learn more about my services">Services</a></li>
<li><a href="about" title="Learn more about me">About</a></li>
<li><a href="blog" title="View latest posts">Blog</a></li>
<li><a href="faqs" title="View latest FAQS">FAQS</a></li>
<li><a href="contact" title="Get in touch">Contact</a></li>
</ul>
</nav>
<h3>BlahBlahBlahH3</h3>
<p>BlahBlahBlah</p>
<a href="#" class="btn" title="Get in touch">Get in touch</a>
</div>
<!-- End Container -->
</header>
<!-- End Header -->Malgré tous mes efforts, il est comme si l'élément nav a une sorte de rembourrage ou de la marge (ce qui ne fonctionne pas). Si je règle la largeur à 100% pour arrêter le nav débordant sur deux lignes, il saute alors sous le logo au lieu de flotter vers la droite sur la même ligne que le logo. Le code peut être un peu désordonné maintenant de beaucoup d'essais et d'erreurs, mais quelqu'un peut-il expliquer pourquoi si je ne place pas l'élément nav à la largeur 100% que le nav déborde sur deux lignes ou pourquoi s'il est réglé à 100% ne restera pas flotter vers la droite?
Étrangement cela semble être juste - je peux avoir une marge beaucoup plus en utilisant px que% sans le casser sur deux lignes. Savez-vous pourquoi c'est? – user4349555
Les marges de pourcentage peuvent être funky lorsque vous ne définissez pas les largeurs et que vous avez des éléments flottants tout le long. Les largeurs de ces éléments sont calculées à la volée, et ne tiennent pas compte de la marge% (puisqu'elle doit connaître les largeurs avant de pouvoir être un nombre). Cela rend les dispositions imprévisibles. Essayez de donner à votre logo 10%, nav une largeur de 90%, puis votre UL une largeur de 100%. Cela permet de définir vos conteneurs sans compter sur le calcul des largeurs des éléments flottants. Cela évitera l'emballage irrégulier. –
Merci pour l'explication – user4349555