如何使水平元素扩展以覆盖可用空间？

Question

我正在尝试创建一个CSS fluid tab menu，其中包含可变数量的标签（类似于Windows中可以看到的标签，其中标签会根据所包含的标题的长度进行扩展，请参见下文）。

这是一个例子，我有设置（我需要保留元素结构）：

<div class="test">
    <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">very long text is this</span>
                </span>
            </span>
        </h3>
    </div>
     <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Two</span>
                </span>
            </span>
        </h3>
    </div>
     <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Three</span>
                </span>
            </span>
        </h3>
    </div>
     <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Four</span>
                </span>
            </span>
        </h3>
    </div>
    <div class="element">
        <h3>
            <span class="dummy-a">
                <span class="dummy-ui-btn-inner">
                    <span class="dummy-ui-btn-text">Five</span>
                </span>
            </span>
        </h3>
    </div>
</div>

和CSS：

.test { width: 100%; display: table; }
.test .element { border: 1px solid red; float: left; min-width: 19%;  }
.test .element.prelast { border: 1px solid green; }
.test .element.last { float: none !important; overflow: hidden; }
.test .element h3 {  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

这将创建以下内容：

当我缩小屏幕时，菜单会断开多行，最后一个元素填充剩余的宽度：

我的问题是在菜单中断后扩展“第一行”中的元素以覆盖可用空间。简单地设置min-width: 19%是问题所在，但我无法正常工作。

问题：
如何在“行”中创建元素（如果它分成多行，它实际上不是一行）仅通过使用CSS占用所有可用空间？

修改：
Here是显示我的意思的示例页面。缩小浏览器窗口并查看元素的行为方式。我正在寻找一种方法，让第一行扩展为全宽，然后分成多行。

更新：
我更新了示例页面。见here。扩展元素时我没有任何问题，因为它们都是“在一行中”。当行“中断”为多行时，问题就开始了。我想知道是否可以通过在屏幕上扩展元素来填补右上角的空白。

以下是两个额外的屏幕截图。

因此需要关闭元素“Four”旁边的差距

现在需要关闭元素“Three”旁边的差距。您可以看到它在元素“Four”上设置某些内容时无法正常工作，因为它不会始终位于右上角位置。相反它应该是我在所有元素上设置的CSS规则（我猜）。

另外，如果可以使用Javascript / Jquery轻松完成，我还会听取意见吗？

感谢您的帮助！

Answer 1

我能想到的第一件事是，由于您已将.test div设置为display: table，因此可能会将.test .element设置为display: table-cell。这将使它们全部保持在同一行，只是扩展到100％。唯一的是＆lt; IE8不处理display: table-cell，但有解决方案。一个是here。我不确定这是否真的能达到你想要的效果，但这是可能的。我会保持潜意识思考它。好问题！

fiddle

Answer 2

您可以只使用宽度为100％的<table>来执行此操作;

<table class="menu" cellpadding="0" cellspacing="0">
<tr>
<td>menu1</td>
<td>menu2</td>
<td>menu3</td>
<td>menu4</td>
<td>menu5</td>
</tr>
</table>

和CSS一样;

.menu{
    width: 100%;
}
.menu tr td{
    height: 20px;
    background: gray;
    cursor: pointer;
    text-align: center;
}
.menu tr td:hover{
    background: white;
}

Here 是现场演示。

Answer 3

如果你可以使用 Javascript和jQuery ，那就有一个解决方案。

<强> check this Demo

就我个人而言，我认为这不是最佳解决方案，但可能会对您有所帮助 此演示也准备只适用于2行

Answer 4

如果你想把它们放在一行并使用它们拥有的所有空间，无论你有多少项，使用display：table，table-row和table-cell是实际的解决方案。但是你必须使用它们中的所有3个才能使它工作。所以你需要的是

<div class="menu">
    <ul> <!-- Menus should usually be Lists if it's your choice -->
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
</div>

然后在css

.menu { display: table; width: 100%; }
.menu ul { display: table-row; width: 100%; }
.menu ul li { display: table-cell; }

这就是所有的魔力。所以你的细胞总是使用整个空间。

如果你想要多行的功能，你必须使用一些Javascript来检查你的窗口，然后将它们分成两个列表来制作它

<div class="menu">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
    </ul>
    <ul>
        <li>Five</li>
    </ul>
</div>