我的布局类似于:

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

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


当前回答

不知道这将出现在什么上下文中,但我相信CSS样式的属性float(向左或向右)将产生这种效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。

如果我错了,请纠正我,我不是100%确定,目前无法自己测试。

其他回答

您可以使用内联块作为@user473598,但要注意较旧的浏览器。。

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla根本不支持内联块,但他们有-moz内联堆栈,这几乎是一样的

内联块显示属性周围的一些跨浏览器:https://css-tricks.com/snippets/css/cross-browser-inline-block/

您可以在以下位置看到一些具有此属性的测试:https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

我们可以对div元素使用以下两种方法中的任意一种:

display: table;

or,

display: inline-block; 

我更喜欢使用display:table;,因为它自己处理所有额外的空间。而display:inline块需要一些额外的空间修复。

不知道这将出现在什么上下文中,但我相信CSS样式的属性float(向左或向右)将产生这种效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。

如果我错了,请纠正我,我不是100%确定,目前无法自己测试。

我通过在div标记中添加span标记,并将CSS格式从外部div标记移动到新的内部span标记,解决了一个类似的问题(我不想使用display:inline块,因为项目居中)。如果display:inline块不是适合您的答案,那么就把它作为另一个备选方案。

评论中提到了这一点,在其中一个答案中很难找到:

如果出于任何原因使用display:flex,则可以改用:

div {
    display: inline-flex;
}

这在浏览器中也得到广泛支持。