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

Posted 2023-03-05

【中文标题】如何使水平元素扩展以覆盖可用空间？

【英文标题】：how to make horizontal elements expand to cover available space?

【发布时间】：2012-09-03 07:15:12

【问题描述】：

我正在尝试创建一个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”旁边的空隙需要补上

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

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

感谢您的帮助！

【问题讨论】：

你可以使用一些 JavaScript 吗？

【参考方案1】：

我能想到的第一件事是，既然您已经将.test div 设置为display: table，也许将您的.test .element 设置为display: table-cell。这将使它们保持在同一行中，并且仅扩展到 100%。唯一的问题是 display: table-cell，但有解决方案。一个是here。我不确定这是否真的达到了你想要的，但这是一种可能性。不过，我会保持潜意识的思考。好问题！

fiddle

【讨论】：

不。已经试过了。设置 display:table-cell 会抛出 .last 元素。它不再与其他元素一致，而且它的宽度和高度都搞砸了。不知道为什么。

如果您删除 table-cell 元素上的任何宽度声明，我会认为 .test 中的另一个 div 设置为 display: table-row 应该可以解决问题。

这是您在元素上的float: left 和.last 上的float: none 的结果吗？我对小提琴没有这种影响。 （即使没有table-row div 包装器）

@Scrimothy：我使用float: none 是为了将最后一个元素扩展到新行后的全宽。

当然，这是有道理的（尽管我在摆弄您未编辑的代码时没有获得该功能）。但是，一旦您使用float:left 将某些东西定义为table-cell（即使它实际上是td 元素），它就会搞砸。因此，如果您删除.element 上的float:left 并设置为table-cell，它们应该会弹出到位。同样，这不允许将它们分成多行，但至少您会将单行拉伸到 100%。一点点 JS 可能允许您即时添加 table-row 元素，尽管一点点 JS 也可能提供比这更好的解决方案。

【参考方案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 是现场演示。

【讨论】：

谢谢。但它也不能“分解”成多行，是吗？请参阅上面的编辑。

【参考方案3】：

如果您想将它们保持在一行并使用它们拥有的所有空间，无论您有多少项目，使用 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>

【讨论】：

True - 使用 Javascript/Jquery 可以做到这一点，但我希望没有。只需占用可用空间可以通过多种方式完成（我也在做显示：表），但处理“换行符”......如果仅使用 CSS 可能，还没有看到或听到过。需要类似max-width: auto-expand...

据我所知，无法使用带有灵活换行符的完整空间，抱歉。你可以让它看起来像它会使用一个背景图像来使用整个空间，它占据了其余的空间，但它不会是一样的

【参考方案4】：

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

check this Demo

我个人认为这不是最好的解决方案，但可能对您有所帮助 此演示也准备仅适用于 2 行

【讨论】：

感谢 jsbin。我试过了，但它并没有真正起作用。宽度设置得很好，但是当 div 分成多行时，我正在寻找一种扩展元素以覆盖整个屏幕宽度的方法。用一条“线”覆盖屏幕是没有问题的。一旦它分成多行，就会变得棘手。