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

发布时间：2020-12-14 16:32:12 所属栏目：资源来源：网络整理

导读：ul liitem1/li liitem1/li liitem1/li liitem1/li liitem1/li liitem1/li/ul 假设每个盒子的宽度为150px,因此每行的总宽度为450px. 我要做的是,自动使列表每行只允许3个框(列表元素),而不是让它在彼此之下. 我尝试了一些东西,而不只是在尝试之前询问！有我

<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;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!