我的布局类似于:

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

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


当前回答

个人而言,我只是这样做:

HTML代码:

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

CSS代码:

div {
    display: inline;
}

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

其他回答

我认为使用

display: inline-block;

但我不确定浏览器的兼容性。


另一种解决方案是将您的div包装在另一个div中(如果您想保持块行为):

HTML格式:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

display:inline块为元素添加额外的边距。

我建议这样做:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

奖金:你现在只需添加margin:0auto,就可以轻松地将这个新奇的#元素居中。

在Firebug中我发现了属性值-moz fit content,它完全符合OP的要求,可以如下使用:

width: -moz-fit-content;

虽然它只在Firefox上运行,但我找不到其他浏览器(如Chrome)的等效版本。

width:1px;
white-space: nowrap;

对我来说很好:)

我只需要设置填充:-whateverYouWantpx;