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

2018-06-22 15:30:26

我试图创建一个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来占用所有可用空间？

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

更新：
我已更新示例页面。看这里。我不会在扩展元素时遇到任何问题，但它们都是“一行”。当行“分解”成多行时，问题就开始了。我想知道是否有可能通过在屏幕上展开所有元素来填补右上方的空白。

这里有两个额外的屏幕截图。

在这里输入图像描述

因此，要素“四”旁边的差距需要关闭

在这里输入图像描述

现在需要关闭元素“Three”旁边的缺口。你可以看到它在设置元素“Four”时不起作用，因为它不会始终位于右上角位置。相反，它应该是我设置所有元素的CSS规则（我猜）。

另外，如果这可以很容易地使用JavaScript / JQuery来完成，我还会听取想法？

感谢您的帮助！

我能想到的第一件事是，因为你已经设置好你的.test div来display: table ，所以可以设置你的.test .element来display: table-cell 。这将使他们保持在同一行，并扩大到100％。唯一的是<IE8不处理display: table-cell ，但是有解决方案。一个在这里。我不确定这是否真的实现了你想要的，但这是一种可能性。尽管如此，我会保持我的潜意识思考。好问题！

小提琴

你可以用一个宽度为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;
}

这里是现场演示。

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

然后在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>

链接地址: http://www.djcxy.com/p/63539.html

上一篇: how to make horizontal elements expand to cover available space?

下一篇: server send push notification to client browser without using polling