[英]How to move all li elements to the left side of the <ul> element?
I want to move all li elements to the left side of the ul element. 我想所有的li元素移动到UI元素的左侧。 It looks like the first li element has a left margin >0 which I don't understand.
看来第一个li元素的左边距> 0,我不明白。
Do you know how I can fix this? 你知道我该怎么解决吗?
The ultimate goal is: the first li element #music and #email element in the footer have the same left margin of 70px (same distance from the left border). 最终目标是:页脚中的第一个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>
The padding on the ul pushes your li items over to the right. ul上的填充将您的li项推到右侧。 Since #email and nav are both indented 70px the only difference is the padding on the ul.
由于#email和nav都缩进了70px,因此唯一的区别是ul上的填充。 Try adding:
尝试添加:
ul {
padding: 0;
}
您可以在ul
元素上添加padding: 0
,以强制其粘贴到父级nav
元素的左边框。
First of all you are missing closing on div id='wrapper'. 首先,您缺少在div id ='wrapper'上关闭的功能。
Second this is my advice for formating ur CSS - Never write class or id then after opening brackets you put values beneeth it. 其次,这是我对格式化CSS的建议-永远不要编写类或id,然后在括号内放上值即可。
Like this 像这样
ul{
margin-top:0px;
margin-bottom:0px;
}
Its much better for you to use some spaces and to be constant in it.. like 4x spaces after ul element - Like this : 对于您来说,使用一些空间并在其中保持常数是更好的选择。像ul元素后的4x空格-这样:
ul {
margin-top:0px;
margin-bottom:0px;
}
Also ur UL dont need to have margin-top: 0 its just better to put top:0 if u dont want any space between body and nav bar... 此外,如果您不希望机身和导航栏之间有任何间隔,则您的UL不需要具有margin-top:0最好放在top:0位置...
U have a lot of mistakes but practice makes u pefect. 你有很多错误,但实践会使你卓有成效。
HTML code is formated nicely. HTML代码格式正确。 Also i suggest you to write comments in CSS and also sometimes in HTML.
我也建议您用CSS编写注释,有时也用HTML编写注释。 Because with big page you will forget what you are doing and were.
因为在大页面上,您会忘记自己在做什么和曾经在做什么。
overflow:hidden -- this overflow missing ;
Sorry for my english. 对不起我的英语不好。 Just close div element with id='Wrapper', thats all:)
只需用id ='Wrapper'关闭div元素,就可以了:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.