html - 如何创建一个仅占用与其子元素相同宽度的 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

这可以通过将 display: inline-block; 应用于容器来实现，如下所示:

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

还有更新后的 JSFiddle:https://jsfiddle.net/ya8b11qf/1/

要使 #container-content 居中，只需将 text-align: center; 添加到其父级即可。因为内容现在显示为 inline，所以它响应文本居中，而标准 div(默认显示为 block)需要使用 margin: 0 自动；。