如何將所有li元素移到左側 <ul> 元件？

Question

我想所有的li元素移動到UI元素的左側。 看來第一個li元素的左邊距> 0，我不明白。

你知道我該怎么解決嗎？

最終目標是：頁腳中的第一個li元素#music和#email元素具有相同的左邊界70px（與左邊框的距離相同）。

 html, body { margin: 0; text-align: center; } header { overflow: hidden } nav { overflow: hidden; display: inline-block; float: left; margin-left: 70px; } nav li { margin-right: 70px; float: left; } nav ul { list-style: none; overflow: hidden } #email { float: left; padding: 25px 0px; margin-left: 70px; } .wrapper { border: 2px solid green; } #menu2 { float: right; margin-right: 70px; border: 2px solid green; } ul { margin-top: 0px; margin-bottom: 0px; } 

 <div class="wrapper"> <header> <nav id="menu"> <ul> <li id="music"> <a href="#"><img src="gfx/music40.gif"></a> </li> <li id="film"> <a href="#"><img src="gfx/film40.gif"></a> </li> <li id="visual"> <a href="#"><img src="gfx/visual40.gif"></a> </li> <li id="media"> <a href="#"><img src="gfx/media40.gif"></a> </li> </ul> </nav> <div id="menu2"> <a id="logo" href="index.html"><img src="gfx/tobera40.gif" alt="logo" class="logo"></a> </div> </header> <div id="main"> <img src="gfx/banner40.jpg"> </div> <footer> <div id="email"> <img src="email.jpg"> </div> </footer> </div> 

Answer 1

ul上的填充將您的li項推到右側。 由於#email和nav都縮進了70px，因此唯一的區別是ul上的填充。 嘗試添加：

ul {
    padding: 0;
}

Answer 2

您可以在ul元素上添加padding: 0 ，以強制其粘貼到父級nav元素的左邊框。

Answer 3

首先，您缺少在div id ='wrapper'上關閉的功能。

其次，這是我對格式化CSS的建議-永遠不要編寫類或id，然后在括號內放上值即可。

像這樣

 ul{
  margin-top:0px;
  margin-bottom:0px;
  }  

對於您來說，使用一些空間並在其中保持常數是更好的選擇。像ul元素后的4x空格-這樣：

ul {
    margin-top:0px;
    margin-bottom:0px;
}

此外，如果您不希望機身和導航欄之間有任何間隔，則您的UL不需要具有margin-top：0最好放在top：0位置...

你有很多錯誤，但實踐會使你卓有成效。

HTML代碼格式正確。 我也建議您用CSS編寫注釋，有時也用HTML編寫注釋。 因為在大頁面上，您會忘記自己在做什么和曾經在做什么。

overflow:hidden -- this overflow missing ;

對不起我的英語不好。 只需用id ='Wrapper'關閉div元素，就可以了：)