HTML/CSS使列表成行,每行3个盒子？

Question

<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

它没有按照我的意愿运作,为什么？

是否有插件可以让生活更轻松？

Answer 1

您无需将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;
}

结果:http://jsfiddle.net/f896G/