7

我正在尝试创建一个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 使“行”中的元素（它不是真正的行，如果它分成多行）占用所有可用空间？

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

更新：
我已经更新了示例页面。见这里。我在扩展元素时没有任何问题，而它们都“排成一行”。当行“分成”多行时，问题就开始了。我想知道是否可以通过使元素在整个屏幕上展开来填补右上角的空白。

这是两个额外的屏幕截图。

在此处输入图像描述

所以需要关闭元素“四”旁边的间隙

在此处输入图像描述

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

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

感谢您的帮助！

4

4 回答 4

1

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

小提琴

于 2012-09-10T12:30:35.530 回答
1

您可以只使用<table>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>

和 CSS 一样；

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

这是现场演示。

于 2012-09-10T12:49:41.713 回答
1

如果您想将它们保持在一行并使用它们拥有的所有空间，无论您有多少项目，使用 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>
于 2012-09-13T15:54:47.357 回答
1

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

检查这个演示

就我个人而言，我认为这不是最好的解决方案，但它可能也可以帮助你这个演示准备只适用于 2 行

于 2012-09-10T12:56:35.570 回答