具有可变宽度列的固定宽度表

Question

我需要一个具有可变宽度的列的固定宽度表，因此这取决于它们的内容，但这些内容之间的水平距离是相同的。

这就是我得到的：

-----------------Table Width-----------------
|----Long Content----|---Content---|--More--|

这就是我想要的：

----------------Table Width------------------
|---Long Content---|---Content---|---More---|

请注意内容单元格中减号的计数！当您使用屏幕截图来测量列内容之间的间距时，您会注意到它们并不总是完全相同

这是我的标记：

<ul>
    <li>Long Content</li>
    <li>Content</li>
    <li>More</li>
</ul>

这是我不工作的样式表：

ul {
    display: table;
    width: 600px;
}
li {
    display: table-cell;
    text-align: center;
    border: solid 1px #000;
}

这是我的jsFiddle：http://jsfiddle.net/ATwqk/12/.我怎样才能得到想要的结果？

Answer 1

如果我正确理解这一点，你可以尝试在ul周围包裹一个固定宽度的div。则宽度：100%；在ul和宽度上：在li 上50%

http://jsfiddle.net/ATwqk/3/

#wrapper{
        width:500px;
    }
    ul {
        display: table;
        width: 100%;
    }
    li {
        display: table-cell;
        text-align: center;
        border: solid 1px #000;
        width:50%
    }
<div id="wrapper">
<ul>
    <li>Long Contentdsdddddddddddd</li>
    <li>Content</li>
</ul>
</div>

Answer 2

您需要将左右填充属性设置为2.5em。但是，只有在没有中断或每个单元格都中断其内容的情况下，这才有效。

ul {
    display: table;
    width: 300px;
}
li {
    display: table-cell;
    text-align: center;
    border: solid 1px #000;
    padding: 0 2.5em;
}

Answer 3

在你的ul标签上试试这个。这应该正是你想要的。

ul
{
    display: flex;
    justify-content: space-between;
    width: 600px;
}

更新jsfiddle:

http://jsfiddle.net/ATwqk/19/