0
Nav Element schwimmt nicht ganz nach rechts
/* 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 -->Trotz meiner Bemühungen ist es, als ob das nav Element eine Art Polsterung oder Rand hat (was es nicht). Wenn ich die Breite auf 100% setze, um zu verhindern, dass das nav auf zwei Linien überläuft, springt es unter das Logo, anstatt nach rechts auf derselben Linie wie das Logo zu schweben. Der Code kann jetzt ein wenig unordentlich von viel Versuch und Irrtum sein, aber kann jemand erklären, warum, wenn ich das nav Element zu Breite 100% nicht setze, das das nav auf zwei Linien verschüttet oder warum, wenn es auf 100% es gesetzt wird Bleib nicht nach rechts schwimmen?
Seltsam scheint dieses Recht zu sein - ich einen weit größeren Spielraum px als% ohne sie brechen auf zwei Linien mit haben. Weißt du warum das so ist? – user4349555
Prozentuelle Ränder können funky sein, wenn Sie keine Breiten definieren und durchgehende Elemente aufweisen. Die Breiten dieser Elemente werden im Flug berechnet und berücksichtigen nicht die% -Marke (da sie die Breite kennen müssen, bevor sie eine Zahl sein kann). Dies führt zu unvorhersehbaren Layouts. Versuchen Sie, Ihrem Logo 10%, nav 90% Breite und dann Ihrem UL eine Breite von 100% zu geben. Dadurch können Ihre Container definiert werden, ohne auf die Berechnung der Breiten der Floating-Elemente angewiesen zu sein. Es vermeidet das unregelmäßige Einwickeln. –
Danke für die Erklärung – user4349555