1

我有一个无序列表，其中所有项目都与最后一个向左浮动 - 最后一个向右浮动。就像这里的例子：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;
}

谢谢！

编辑：删除了一些代码。

4

2 回答 2

4

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

http://jsfiddle.net/HkChk/

li.fill {
    overflow: hidden;
    float: none;
    position: relative;
    width: auto;
    display: block;
}
于 2013-08-23T09:26:43.323 回答
3

使用这样的 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让它在那里工作。最后你当然可以使用一个类，就像你的问题一样。

演示

先试后买

于 2013-08-23T09:17:40.247 回答