導航元素將不能完全浮動的權利

Question

/* 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 -->

儘管我盡了最大努力就好像在nav元素具有某種填充或保證金的（它沒有）。如果將寬度設置爲100％以阻止nav溢出到兩條線上，它會跳到徽標下面，而不是在徽標的同一行上浮動到右邊。現在從大量的試驗和錯誤的代碼可能有點雜亂，但任何人都可以解釋爲什麼如果我沒有設置nav元素的寬度100％，nav溢出到兩條線或爲什麼如果它被設置爲100％不會一直飄到右邊？

Answer 1

Heyo，

它看起來像你的利潤率是flubbing東西了。如果你願意分開與方式（如果你要在這樣狹小的空間，其中4％將是非常微小的建議），試試這個：

nav { 
    float: right; 
    font-size: 1.250em; 
    font-weight: bold; 
    text-transform: uppercase; 
} 

nav ul { 
    list-style: none; 
    float: right; 
} 

nav ul li { 
    float: left; 
    display: block; 
    margin-right: 20px; 
} 

你的資產淨值是相當大的，所以在在900px斷點附近，你會想要減小字體大小，或者將它全部移到float：left，這樣當它下到徽標時它看起來更自然。

Answer 2

1. 從nav中刪除width: 100%。
2. 取下ulpadding和margin（通過瀏覽器作爲默認添加）
3. 減少nav項目font-size - 如果太大當然nav將包裹！
4. 請注意，您的container有90％的width - 因爲nav在此範圍內，所以它不會到達最右邊緣。

/* Generic Styles */ 
 

 
body { 
 
    background: #ffffff; 
 
    color: #222222; 
 
    font: 1em; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    width: 90%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 

 
/* Layout Styles */ 
 

 
header { 
 
    background-image: url(../images/rocket.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: left; 
 
    background-color: #003151; 
 
} 
 

 
header img { 
 
    float: left; 
 
    margin-top: 30px; 
 
} 
 

 
header h3 { 
 
    clear: both; 
 
} 
 

 
nav { 
 
    float: right; 
 
    font-size: 1.250em; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    margin-top: 62px; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li { 
 
    float: left; 
 
    display: block; 
 
    margin-right: 14px; 
 
} 
 

 
nav ul li:last-child { 
 
    margin-right: 0; 
 
} 
 

 
nav ul li a { 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
}

<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 -->