具有x个具有相同填充的选项卡的CSS导航

我正试图用css找出一个特定的布局

[…tab1随机文本..][…tab2更多随机文本..][…tab3其他随机文本..][…tab4..][…tab5..]

这些是要求：

• 所有选项卡都位于固定宽度的div内
• 制表符不应该在该div上展开，而应该填充它
• 选项卡的数量可能有所不同
• 每个选项卡的宽度未知（取决于内部文本）
• 所有制表符应共享相同的填充（从最外层字母到制表符内边框的空间应相同，由上面的“.”表示）。此填充不必固定，但在选项卡之间应相同
• 没有计算。如果添加或删除了一个或多个选项卡，则所有这些选项卡都应在不修改css的情况下工作

我在桌子上试过：

<table>
    <tr>
        <td>Tab1</td>
        <td>Tab 1 Space</td>
        <td>Tab 2 more Space</td>
        <td>Tab 3 even more Space</td>
        <td>Tab 4</td>
    </tr>
</table>

表1
表1空间
表2更多空间
表3更多空间
表4

（）

---

我面临的问题是，填充根据表格的宽度和选项卡的数量而变化。

删除表格的宽度，这样就完美了

在给定约束的情况下，纯CSS是不可能的 由于您的限制，似乎在大多数情况下，仅使用css在数学上是不可能的（文本长度相同除外）

以两个选项卡和以下四个特定（且相互冲突）的需求为例（假设

500px

fixed width container；需求已重新排序以供说明）：

（1）每个选项卡的宽度未知（取决于内部文本）

假设Tab2的文本长度是Tab1的两倍。因此，对于图示，Tab1=

10px

，Tab2=

20px

，然后

（2）所有制表符应共享相同的填充（从最外层字母到制表符内边框的空间应相同，由上面的“.”表示）。此填充不必固定，但在选项卡之间应相同

而且

（3）无需计算。如果添加或删除了一个或多个选项卡，则所有这些选项卡都应在不修改css的情况下工作

不言自明，但

（4）选项卡不应扩展到该div上，而应填充该div

这表示以下情况之一：

A.每个选项卡将是宽度的50%，文本宽度保持不变，因此Tab1=

120px 10px 120px

，Tab2=

115px 20px 115px

，不满足（1）的要求，因为两者的总尺寸将是相同的宽度，或者（2）填充宽度将根据插图有所不同，但可能满足（3）和（4）的要求。这不是你想要的

B.每个选项卡将是宽度的50%，但对于Tab1，文本宽度必须拉伸，对于Tab2，文本宽度必须压缩，以使文本宽度相等。这在技术上仍然无法满足（1），但确实满足（2）和（4），因为两者都设置为

120px 10px 120px

或

115px 20px 115px

，因为文本以某种方式扭曲以“适应”空间。不做（3）这是否可能是值得怀疑的，但可能无关紧要，因为我相信这不是你想要的

C.每个选项卡将根据您的需要设置（1）和（2）（2）的固定数量（比如10px），这会在选项卡之间或周围留下间隙，比如

10px 10px 10px

，间隙

430px

，然后

10px 20px 10px

。这可能满足（3），但不满足（4），因为它们不会真正“填充”固定容器的空间——在某个地方会有“间隙”。这不是你想要的

D.您最终想要声明的是每个选项卡的填充设置为相等，这可以根据（1）和（2）进行，但不能使用约束（3），因为需要进行计算。在本例中，它是

（500px-30px）/4=117.5px

。这使得选项卡

117.5px 10px 117.5px

和

117.5px 20px 117.5px

。但正如您所看到的，由于文本的宽度是灵活的，因此必须动态地完成，大致使用以下公式：

(containerWidth - totalTextWidths) / (2 x numTabs) = padding

如果希望选项卡之间有某种类型的小间隙，则需要将其添加到公式中（此处假定间隙为2px，因此

gapWidths=（（numTabs-1）x2px）

）：

---

因此，您给出的约束使解决方案变得不可能——要么必须考虑计算，要么需要重新考虑选项卡的显示方式。您正在寻找类似的解决方案吗？=> 我添加了一个

宽度：1%
整体而言：

td {
    padding: 5px 0;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
    width:1%;
}

在表中还添加了一个div来设置整个宽度（整个选项卡容器）


如果我正确理解了所有约束条件，那么使用
表格
和
表格单元格
显示属性就可以轻松实现这一点

设置包含div的宽度：

.container {
width: 800px;
}

然后将ul设置为具有表格显示：

ul {
display: table;
width: 100%;
}

最后，将li设置为表格单元格：

li {
display: table-cell;
}

请参阅完整示例：
我感觉这并不是您真正想要的，但它确实解决了以下问题：

一致填充
元素填充元素
没有计算
HTML

<div class="tab-container">
    <ul class="tabs">
        <li>Tab1</li>
        <li>Tab 1 Space</li>
        <li>Tab 2 more Space</li>
        <li>Tab 3 even more Space</li>
        <li>Tab 4</li>
    </ul>
</div>

这是我的建议

解决方案基于元素之间可以有空间的假设，因为您没有提到这样的条件

通过此解决方案，我向您提出了一个问题-对flexbox的浏览器支持

有关flexbox的信息
您可以在flexbox上阅读以下内容：




这基本上是不可能的，单凭CSS最好的设置是，您可以添加X个选项卡，但必须手动计算选项卡的宽度，以便填充容器，例如使用4个选项卡，您可以这样做（注意.Tab类的宽度是25%，即100/4）：

T
li {
display: table-cell;
}

<div class="tab-container">
    <ul class="tabs">
        <li>Tab1</li>
        <li>Tab 1 Space</li>
        <li>Tab 2 more Space</li>
        <li>Tab 3 even more Space</li>
        <li>Tab 4</li>
    </ul>
</div>

body {
    background: black;
}
.tab-container {
    display: block;
    width: 500px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}
.tabs > li {
    display: block;
    padding: 5px;
    background: #40404c;
    text-align: center;
    white-space: nowrap;
    color: white;
    font-size: 11px;
}

                <div id="TabsContainer">
                    <div class="Tab">
                        <div class="TabContainer">Tab 1</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 2</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 3</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 4</div>
                    </div>
                </div>

#TabsContainer {
    font-size: 0;
    white-space: nowrap;
}
.Tab {
    display: inline-block;
    *zoom: 1;
    *display: inline;

    width: 25%;
}
.TabContainer {
    background: #f00;
    font-size: 12px;
    border-left: 1px solid #000;
    padding: 10px;
}

.container {
width: 800px;
}

ul {
display: flex;
width: 100%;
}

li {
flex:auto;
}