Question

我有一个带有两个子元素的容器（上一个/下一个链接）。 prev / next链接的标签长度不同，但我需要两个链接在页面上的宽度相同。每个链接应该是最宽元素的宽度，但不能更宽。分页容器应根据需要进行扩展，但如果链接的文本不需要，则不应该是页面的整个宽度。链接的文本可能会更改，因此我无法在其上设置固定宽度。

这是我到目前为止所拥有的：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表来模拟列表布局。

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

1 个答案:

Demo Fiddle