Question

我有一个图片库，我不想给第三个列表项额外的课程：

   <div class="row">
        <ul class="rowUl">
            <li>ssss</li>
            <li>ssss</li>
            <li>ssss</li>
        </ul>
    </div>

和css

.row {
    width: 620px;
    clear: both;
    overflow: hidden;
}

.rowUl {
    width: 645px;
    float: left;
}

.rowUl li {
    width: 220px;
    float: left;
}

但第三个列表项在另一行中删除。如何在没有额外课程的情况下解决这个问题？

Answer 1

220 * 3 = 660，

rowUL = 645

那15个额外的像素推动浮动的div。

解决方案：

制作rowUL宽度660，使行宽660

OR：

使rowUL li width 215

Answer 2

如果您的情况可行，请尝试将width从645px增加到.rowUl中更大的值。

Answer 3

你有3个浮动的LI元素，每个220px宽。 3 * 220 = 660，但是包含元素的宽度仅为645px，因此第三个不能放在第二个旁边，而是落在第一个下面的另一行。如果您想将它们全部放在一行中，请将.rowUl的宽度设置为660px。

另外，我不知道你是否正在使用某种CSS重置 - 如果你没有，请注意UL和LI元素的默认边距和填充也会影响这一点。如果你想确保它们没有，你需要将它们设置为0.

Answer 4

在660px范围内，内联元素的宽度限制超过了645px（所有三个元素每个220px）

你可以通过增加外部元素的宽度超过 660px

来实现

希望这会有所帮助迈拉

CSS溢出：div中的列表

4 个答案: