如何使div不大于其内容？

我的布局类似于：

<div>
    <table>
    </table>
</div>

我希望div只扩展到表的宽度。

当前回答

有两种更好的解决方案

显示：内联块；或显示：表格；

其中有两个显示：表；更好，因为显示：内联块；增加额外的边距。

用于显示：内联块；可以使用负边距方法来修复多余的空间

其他回答

可以对父元素使用display:flex

#parentElement {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }

对我有用的是：

display: table;

（在Firefox和Google Chrome上测试）。

个人而言，我只是这样做：

HTML代码：

<div>
    <table>
    </table>
</div>

CSS代码：

div {
    display: inline;
}

如果在div上应用浮点数，它也会起作用，但显然，您需要在下一个HTML元素中应用“清除两者”的CSS规则。

只需使用display：inline；（或空白：nowrap；）。

我希望你觉得这很有用。

仅仅

<div style="display: inline;">
    <table>
    </table>
</div>

推荐文章