Question

我似乎无法弄清楚如何获得6个列表项（带间距）以在网站上均匀水平对齐。页面的宽度是1000px，这就是我的...

<ul id='mp_locations'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#mp_locations {
clear:both;
list-style:none;
padding:0;
margin:0;
width: 1000px;
}
#mp_locations li {
float:left;
width:180px;
list-style:none;
height:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
padding:0;
margin:0;
margin-left:10px;
width:15%;
}
#mp_locations li:first-child {
margin-left:0;
}
</style>

这个问题是15％太小但16％太大。既然你不能做小数（据我所知）我不能把它设置为一定数量。所以基本上，我怎么能得到6个盒子在页面上均匀排列？感谢任何帮助，谢谢。

Answer 1

嘿现在定义 id with #mp_locations li

的15.83%

#mp_locations li {
width:15.83%;
}

现场演示 http://tinkerbin.com/kzx7nX9s

Answer 2

你可以做小数:) http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html

Answer 3

#mp_locations li中有两个宽度规则你可以把它改成

#mp_locations li {
float:left;
width:156px;
list-style:none;
....
margin:0;
margin-left:10px;

我建议你也改变边际： margin: 0px 5px;

Answer 4

不要重复相同的风格属性。只需更改margin-left，即可获得所需的输出：

CSS

#mp_locations {
clear:left;
list-style-type:none;
padding:0;
margin:0;
width: 1000px;
background-color:red;
overflow:hidden;
}
#mp_locations li {
float:left;
height:100px;
border-radius:5px;
background-color: #F5F5F5;
margin-left:8px;
width:16%;
display:inline;
}
#mp_locations li:first-child {
margin-left:0;
}

HTML

<ul id='mp_locations'>
<li>d</li>
<li>f</li>
<li>d</li>
<li>ff</li>
<li>fff</li>
<li>ddfdfdfd</li>
</ul>

Working DEMO

将列表与6个项目水平对齐？

4 个答案:

CSS

HTML