<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
假设每个盒子的宽度为150px,因此每行的总宽度为450px.
我要做的是,自动使列表每行只允许3个框(列表元素),而不是让它在彼此之下.
我尝试了一些东西,而不只是在尝试之前询问！
有我的尝试：
<div class="container">
<ul>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
<li>hreyyy</li>
</ul>
</div>
.container {
width: 450px;
}
.container ul li {
width: 150px;
height: 100px;
background-color: red;
float: left;
}
.container ul {
display: inline;
}
结果：
img http://gyazo.com/fc8367ed762c25b29abb94a1e31e4da4.png
它“不是我想要的,为什么？
是否有插件可以让生活更轻松？
解决方法
您无需将UL设置为显示为内联对象.相反,做这样的事情：
.container {
width: 450px;
}
.container ul {
padding: 0; /* remove default padding and all margins! */
margin: 0;
list-style-type: none; /* remove the • */
}
.container ul li {
width: 150px;
height: 100px;
background-color: red;
float: left;
}
