使具有可变宽度内容的两个元素具有相同的宽度

Question

我有一个包含两个子元素（上一个/下一个链接）的容器。上一个/下一个链接的标签长度​​不同，但我需要两个链接在页面上的宽度相同。每个链接都应该是最宽元素的宽度，但不能更宽。分页容器应根据需要扩展，但如果链接的文本不需要，则不应为页面的全宽。链接的文字可能会改变，所以我不能在它们上设置固定的宽度。

这是我目前所拥有的：http://jsbin.com/kukucusabecu/1/edit?html,css,output 我想要的是“下一个”链接与“上一个”链接的宽度相同，而不使用固定宽度，因为链接的文本是可变的。

我已经搜索过 SO，我发现所有相关的是：Make Two Floated CSS Elements the Same Height 但是，这是关于使两个元素具有相同的高度，而不是相同的宽度。我不想为此使用表格，因为这不是表格数据！

Answer 1

您总是可以使用 CSS 表格布局 - 每个链接都是一个宽度为 50% 的单元格：

Demo Fiddle

.pagination {
    background: #ccc;
    display: table;
    font-size: 20px;
}
.pagination a {
    display: table-cell;
    width:50%;
    padding: 0.5em;
}
.pagination .prev {
    background: #ddd;
}
.pagination .next {
    background: #ccc;
}

请注意，这与使用 HTML 表格不同，HTML 表格应该（语义上）用于数据内容——可以使用 CSS 表格来模拟列表布局。