Question

我有一个无序列表，我将所有项目都放在左边漂浮的最后一个项目中 - 最后一个项目向右浮动。就像这里的例子：http://jsfiddle.net/AkwnJ/。

我想做什么，在LI＃9（彩色灰色）上是为了填补第8项和第10项之间的空间。但我不知道该怎么做。有人可以告诉我如何。我一直在尝试关注此示例：http://jsfiddle.net/bYmM4/7/取自此处：Filling space between floating elements。然而，该示例使用DIV而我使用的是UL - 因此有点不同。但当然适用相同的原则吗？

希望有人知道哪个会有什么好处？

为了省去你必须去jsFiddle，我的HTML和CSS如下：

HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li class="fill"><div>9</div></li>
    <li class="end">10</li>
</ul>

CSS：

html, body{
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    text-align: center;
    display: inline-block;
    width: 30px;
    height: 30px;
    float: left;
    border: black 1px solid;
}

li.end {
    float: right;
}

li.fill {
    overflow: hidden;
}

li.fill div {
    background-color: gray;
    height: 100%;
    width: 100%

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

谢谢！

修改：删除了一些代码。

Answer 1

最后一个元素应该是倒数第二个，就在de wide元素之前。宽元素也需要显示：块和宽度：自动。

http://jsfiddle.net/HkChk/

li.fill {
    overflow: hidden;
    float: none;
    position: relative;
    width: auto;
    display: block;
}

Answer 2

而不是浮动元素使用这样的CSS表：

ul {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
    width: 30px;
    min-width: 30px;
    height: 30px;
}

li:nth-last-child(2) {
    width: 100%;
    min-width: 30px;
}

作为注释：:nth-last-child(2)将为最后一个元素设置样式。使用此方法可以省去为此特定元素添加额外的类。这在IE8中不起作用，但您可以使用Selectivizr使其在那里工作。最后，您当然可以使用课程，就像您的问题一样。

<强>演示

Try before buy

CSS - 浮动LIs - 并在其间填充空间

2 个答案: