为什么这个DIV不会收缩包装？

Question

我有一排<div>个按钮。我模仿了背景的一些实际行为。工作得很好。问题是外部<div>（行）没有收缩包装，因此字段集的边界也是宽的。见这里：http://jsfiddle.net/L99VY/

我也认为我使用

做了一些奇怪的事情

div.button {
    display: table-cell;
    ...
}

如果我尝试其他内容，例如display-inline或float:left，它也会影响文本在按钮上的显示方式。收缩包裹问题与此有关吗？

如果您在IE11或最新的FF中打开小提琴，您会看到我的想法（背景图像除外）。

有什么建议吗？

Answer 1

将display: inline;添加到fieldset，边框位于fieldset。您也可以使用inline-block，but IE7 or older不能很好地使用它。

jsFiddle

您应该查看this answer on SO，了解为什么fieldset（本例中的块级元素）的宽度会自动扩展到其父容器的宽度。< / p>

Answer 2

您可以向fieldset添加“display”规则。 例如：

        fieldset {
            display: inline-block;
        }

为什么不使用display：table-row和display：inline-table？它们会产生与内联块相同的效果，但会更合适。