如何将所有li元素移到< ul>的左侧.元素? [英] How to move all li elements to the left side of the <ul> element?
本文介绍了如何将所有li元素移到< ul>的左侧.元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将所有 li 元素移到 ul 元素的左侧.似乎第一个 li 元素的左边距为> 0,我不理解.
I want to move all li elements to the left side of the ul element. It looks like the first li element has a left margin >0 which I don't understand.
您知道我该如何解决吗?
Do you know how I can fix this?
最终目标是:页脚中的第一个 li 元素#music和#email元素具有相同的左边界70px(距左边框相同的距离).
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).
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>
推荐答案
ul上的填充将li项推到右侧.由于#email和nav都缩进了70px,因此唯一的区别是ul上的填充.尝试添加:
The padding on the ul pushes your li items over to the right. Since #email and nav are both indented 70px the only difference is the padding on the ul. Try adding:
ul {
padding: 0;
}
这篇关于如何将所有li元素移到< ul>的左侧.元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文