Table 单元格宽度不符合我的预期

Question

我有一个订单清单，像这样：

    <div class="content-tabs fixed-tabs">
        <ul class="tabs">
            <li><a>Terms of Use</a></li>
            <li><a>Privacy Policy long long description</a></li>
        </ul>
    </div>

我正在尝试做一些事情：

1 保持相同大小的标签；和 2 约束每个选项卡的最大大小

请原谅代码 - 我目前正在试验。这是主要的 2 行 - 如您所见，我正在使用 table 来使单元格对齐工作。

.tabs {
    display: table;
}

.tabs li
{
    display: table-cell;
}

以下是我目前正在使用的东西。这几乎就是我想要的。

输出 - 注意两个选项卡上的额外填充：

单个文本行上的正确输出 - 注意最宽的选项卡上缺少填充

两个选项卡相等在下面的代码中最大宽度设置为 26.4rem - 这是尊重

不过有一点小问题。当文本达到最大宽度并在长描述的情况下换行时，宽度保持在 26.4rem，这不一定是正确的。不是的原因是因为换行后，第 1 行的单词通常小于 26.4rem - 它们的宽度可能是 25rem、24rem 或其他任何东西，所以两边都有一些额外的填充。

我需要知道的是，我可以让这些 table 单元格在文本换行时收缩换行，但仍然给它们最大宽度吗？

.tabs {
    display: table;
}

.tabs li
{
    display:table-cell;
    height:4.8rem;
    min-width:16rem;
    overflow:hidden;
    vertical-align:middle;
    width:26.4rem;
}

.tabs li a
{
        display:block;
        max-height:2.8rem;
        overflow:hidden;
        text-align:center;
}

Answer 1

我假设您只有 2 个 table 单元格。在单元格上使用百分比 width:50% 应该可以正常工作。

JsFiddle Demo

.tabs {
    display: table;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}
.tabs li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid red;
    width: 50%;
    padding: 10px;
}

<ul class="tabs">
    <li><a>Terms of Use</a></li>
    <li><a>Privacy Policy long long description</a></li>
</ul>

<br/><br/>

<ul class="tabs">
    <li><a>Terms of Use</a></li>
    <li><a>Privacy Policy</a></li>
</ul>

Table 单元格宽度不符合我的预期

Table cell widths not working how I expected

css

css-tables