我的布局类似于:

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

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


当前回答

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

我建议这样做:

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

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

其他回答

这似乎在所有浏览器上都很适用。示例是我在网上和时事通讯中使用的实际广告。只需更改div的内容。它将根据您指定的填充量进行调整和收缩。

<div style="float:left; border: 3px ridge red; background: aqua; padding:12px">
    <font color=red size=4>Need to fix a birth certificate? Learn <a href="http://www.example.com">Photoshop in a Day</a>!
    </font>
</div>

你的问题的答案在于未来,我的朋友。。。

即“内在”将随最新的CSS3更新而来

width: intrinsic;

不幸的是IE落后于它,所以它还不支持它

更多信息:CSS内部和外部尺寸模块级别3和我可以使用吗?:内在和外在尺寸。

现在,您必须满足<span>或<div>设置为

display: inline-block;

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

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

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

HTML代码:

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

CSS代码:

div {
    display: inline;
}

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

CSS2兼容解决方案应使用:

.my-div
{
    min-width: 100px;
}

您也可以浮动div,这将迫使它尽可能小,但如果div中有任何内容浮动,则需要使用clearfix:

.my-div
{
    float: left;
}