如何将所有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元素，就可以了：)