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

我正在尝试创建一个

CSS流体选项卡菜单

，该菜单具有可变数量的选项卡（类似于在Windows中可以看到的，其中选项卡根据所包含标题的长度展开，请参见下文）

下面是一个示例，我已经设置好了（我需要保持元素结构）：

这将创建以下内容：

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

我的问题是，一旦菜单中断，扩展“第一行”中的元素以覆盖可用空间。简单地设置

minwidth:19%

是个问题，但我无法让任何东西工作

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

编辑：
这是一个显示我的意思的示例页面。收缩浏览器窗口并查看元素的行为。我正在寻找一种方法，使第一行在分成多行后扩展到全宽

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

下面是另外两个屏幕截图

因此，元素“4”旁边的缺口需要被缩小

现在，元素“三”旁边的差距需要缩小。您可以看到，在元素“4”上设置某些内容是不起作用的，因为它并不总是位于右上角的位置。相反，它应该是我在所有元素上设置的CSS规则（我猜）

此外，如果可以使用Javascript/Jquery轻松完成这项工作，我也会听取一些想法

---

谢谢你的帮助

我能想到的第一件事是，既然您已经将

.test

div设置为

display:table

，也许可以将

.test.element

设置为

display:table cell

。这将使它们保持在同一行，并仅扩展到100%。唯一的问题是，显示：表格单元格，但有解决方案。一个人。我不确定这是否真的达到了你想要的，但这是可能的。不过，我会保持我的潜意识去思考它。好问题

---

您只需使用宽度为100%的

就可以做到这一点

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

---

是现场演示。

如果您可以使用Javascript和jQuery，则有一个解决方案

就个人而言，我不认为这是最好的解决方案，但也许它可以帮助你

---

此外，如果您希望将两行保留在一行中，并使用它们拥有的所有空间（无论有多少项），则此演示仅适用于两行，使用display:table、table row和table cell是实际的解决方案。但你必须使用这三种方法才能让它发挥作用。所以你需要的是

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

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

如果你想要多行的功能，你必须使用一些Javascript来检查你的窗口，然后在两个列表中列出它们

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

一个
两个
三
四


五

您能使用一些JavaScript吗？不行。我已经试过了。设置

display:table cell

将抛出

.last

元素。它不再和其他元素保持一致，加上它的宽度和高度都被弄乱了。不知道为什么。我本以为

.test

中的另一个div设置为

display:table row

，如果您删除

表格单元格

元素上的任何宽度声明，应该可以实现这一点。这是您的

float:left

在元素上和

float:none

在

上的结果吗？我不会在小提琴上得到那种效果。（即使没有
表行
div包装器）@Scrimothy:我正在使用
float:none
，以便在最后一个元素进入新行时将其扩展到全宽。当然，这是有意义的（尽管我在处理未经编辑的代码时没有获得该功能）。但是，一旦您使用
float:left
将某个元素定义为
表单元格（即使它实际上是
td
元素），就会把它搞糟。因此，如果删除
元素上的
浮动：left
，并将其设置为
表格单元格
，它们应该会弹出到位。同样，这不允许将它们分成多行，但至少您可以将单个行扩展到100%。一点JS可能允许您动态添加
表行
元素，尽管一点JS也可能允许更好的解决方案。谢谢。但它也不能“分解”成多行，是吗？见我的编辑上面。谢谢你的jsbin。我试过了，但不起作用。宽度设置得很好，但我正在寻找一种方法来扩展元素，以便在div分成多行时覆盖整个屏幕宽度。用一条“线”覆盖屏幕没有问题。一旦它被分成多行，它就会变得很棘手。没错——这在Javascript/Jquery中是可能的，但我希望不用它也能过得去。仅仅占用可用空间就可以通过多种方式完成（我也在做display:table），但是处理“换行”。。。我还没有看到或听说这是否只适用于CSS。需要类似于
max width:auto expand
…据我所知，使用灵活换行的完整空间是不可能的，抱歉。你可以让它看起来像是用背景图片占据了整个空间，但它不会是一样的
.menu{
    width: 100%;
}
.menu tr td{
    height: 20px;
    background: gray;
    cursor: pointer;
    text-align: center;
}
.menu tr td:hover{
    background: white;
}

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

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

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