如何创建仅占用子元素宽度的DIV（不指定固定像素宽度）？

Question

我想在我的元素周围有一个DIV，它只占用与其元素的最大水平宽度一样多的水平宽度。我有这些HTML元素......

<div id="container-content">
    <h3>My Subscriptions</h3> 
    <table id="subscriptions-table">
        . . .
    </table>
</div>

和这种风格

#container-content {
    text-align: center;
    background-color: red;
}

#subscriptions-table {
    margin: 0 auto;
}

但令人失望的是，带有class =“container-content”的DIV占据屏幕宽度的100％（https://jsfiddle.net/ya8b11qf/），我宁愿它只占用其中表格的宽度。我不想为“container-content”指定固定的像素宽度。

Answer 1

这可以通过将memcached应用于容器来实现，如下所示：

display: inline-block;

您更新的JSFiddle：https://jsfiddle.net/ya8b11qf/1/

要将#container-content { text-align: center; background-color: red; display: inline-block; } 居中，只需将#container-content添加到其父级。由于内容现在显示为text-align: center;，因此它会响应文本居中，而标准div（默认显示为inline）则需要使用block。