我试图让 ul 和 li 居中。我认为问题是最后一里的左边距。我尝试了两件事,但似乎没有影响。有什么问题?
CSS:
ul {
position:relative;
width: 640px;
margin:40px auto;
padding:0;
list-style-type:none;
}
ul li {
float:left;
position:relative;
width: 100px;
padding: 0px;
margin-right: 10px;
background-color: #f2f2f2;
display: block;
height: 30px;
line-height: 30px;
text-align:center;
font-family: verdana;
font-size:10px;
color: #666
}
ul li:last-child { margin-right: 0px; }
/* ul li.last-item { margin-right: 0px; } */
HTML:
<ul>
<li> first </li>
<li> second </li>
<li> third </li>
<li> fourth </li>
<li> fifth </li>
<li> sixth </li>
</ul>
我在这里生活:http://jsfiddle.net/a4aQN/
最佳答案
这是执行此操作的正确 CSS:
ul {
margin: 40px auto;
list-style-type:none;
text-align: center;
}
ul li {
width: 100px;
padding: 0px;
margin-right: 10px;
background-color: #f2f2f2;
display: inline-block;
height: 30px;
line-height: 30px;
font-family: verdana;
font-size:10px;
color: #666
}
基本上我把 text-align: center;
放在了你的 ul
上。您还有其他一些不需要的东西,例如设置它的宽度和 float: left;
在您的 li
上。
关于html - 居中 li 和最后一个 child 的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13218219/