CSS無法對齊<li>

Question

我想在標題部分設置列表，但是每次我做的時候，我的家，關於和博客都超出了背景色或使背景色最小化。 我不知道你能理解我我想說什么，如果你想我可以把圖片放在我想要的地方。

 header { background: #304852; color: #ffffff; border-bottom: #585858 3px solid; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 40px; } header ul { margin: 0; padding: 0; } header li { float: left; display: inline; padding: 0 20px 0 20px; } header nav { float: right; } 

 <header> <div id="logo"> <img src="http://lorempixel.com/120/60/" width="120px" height="60px"> </div> <nav> <ul> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">HOME</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">ABOUT</a></li> <li> <a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">BLOG</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">CONTACT</a></li> </ul> </nav> </header> 

Answer 1

最好的做法是從header li和header nav CSS選擇器中刪除float ，然后將簡單的text-align應用於header nav 。

請參閱隨附的代碼以供參考。

 header{ background: #304852; color: #ffffff; border-bottom: #585858 3px solid; } header a{ color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 40px; } header ul{ margin: 0; padding: 0; } header li{ /* float: left; */ display: inline-block; padding: 0 20px 0 20px; } header nav{ /* float: right; */ text-align: right; } 

 <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> 

Answer 2

必須進行兩項更改：

1.） float: left; 在#logo上， #logo ，它是一個block元素，並占據整個寬度。

2.） overflow: auto在header overflow: auto ，因為它僅包含浮動元素，並且不保留背景顏色。

 header { background: #304852; color: #ffffff; border-bottom: #585858 3px solid; overflow: auto; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 24px; } #logo { float: left; } header ul { margin: 0; padding: 0; } header li { float: left; display: inline; padding: 0 20px 0 20px; } header nav { float: right; } 

 <header> <div id="logo"> <img src="http://lorempixel.com/120/60/" width="120px" height="60px"> </div> <nav> <ul> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">HOME</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">ABOUT</a></li> <li> <a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">BLOG</a></li> <li><a href="C:\\Users\\Mihajlo\\Desktop\\retardirani mihajlo\\Web about">CONTACT</a></li> </ul> </nav> </header>