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

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行 - 您可以看到我使用表格进行单元格对齐。

.tabs {
    display: table;
}

.tabs li
{
    display: table-cell;
}

以下是我目前正在使用的内容。这几乎可以满足我的需求。

输出 - 注意两个标签上的额外填充：

在单个文本行上更正输出 - 注意最宽选项卡上没有填充

两个标签都相同 在下面的代码中，最大宽度设置为26.4rem - 这是值得尊重的

然而，有唠叨。当文本达到最大宽度并且在长描述的情况下包装时，宽度保持在26.4rem，这不一定正确。它不是因为包裹了，第1行的字通常小于26.4rem - 它们的宽度可能是25rem，24rem或者其他什么，所以在任何一侧都有一些额外的填充。

我需要知道的是，当文本被包装时，我可以使这些表格单元收缩包装，但仍然给它们一个最大宽度吗？

.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个表格单元格。在单元格上使用百分比width:50%可以使其正常工作。

<强> JsFiddle Demo

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;