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

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占用所有可用空间？

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

更新:
我更新了示例页面.看到这里.扩展元素时我没有任何问题,因为它们都是"在一行中".当行"中断"为多行时,问题就开始了.我想知道是否可以通过在屏幕上扩展元素来填补右上角的空白.

这是另外两个截图.

因此,元素"四"旁边的差距需要关闭

现在需要关闭元素"三"旁边的差距.您可以看到它在元素"Four"上设置某些内容时无法正常工作,因为它不会始终位于右上角位置.相反,它应该是一个CSS规则,我正在设置所有元素(我猜).

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

谢谢你的帮助!

Answer 1

我能想到的第一件事是，既然你已经将你的.testdiv 设置为display: table，也许将你的设置.test .element为display: table-cell。这将使它们全部位于同一行并扩展到 100%。唯一的问题是 < IE8 不处理display: table-cell，但有解决方案。一个人在这里。我不确定这是否真的达到了你想要的效果，但这是有可能的。不过我会在潜意识里不断地思考这个问题。好问题！

小提琴