我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
display:inline块为元素添加额外的边距。
我建议这样做:
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖金:你现在只需添加margin:0auto,就可以轻松地将这个新奇的#元素居中。
其他回答
我认为使用
display: inline-block;
但我不确定浏览器的兼容性。
另一种解决方案是将您的div包装在另一个div中(如果您想保持块行为):
HTML格式:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
好的,在很多情况下,您甚至不需要做任何事情,因为默认情况下,div的高度和宽度都是自动的,但如果不是这样,应用内联块显示将对您有效。。。看看我为你创建的代码,它会做你想要做的事情:
第二部分{显示:内联块;}<div><表><tr><td>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Morbi ultrices feugiat massa sed laoreet。Maecenas et magna egestas,facilisis purus quis,前庭nibh</标准差><td>Nunc auctor aliquam est ac viverra公司。Sed enim nisi,feugiat Sed accumsan eu,convalis eget felis。Pellentesque consequat eu leo nec pharetra。直径为</td><td>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Morbi ultrices feugiat massa sed laoreet。Maecenas et magna egestas,facilisis purus quis,前庭nibh</标准差></tr></table></div>
不知道这将出现在什么上下文中,但我相信CSS样式的属性float(向左或向右)将产生这种效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。
如果我错了,请纠正我,我不是100%确定,目前无法自己测试。
可以对父元素使用display:flex
#parentElement {
display: flex;
flex-direction: column;
align-items: flex-start;
}
在Firebug中我发现了属性值-moz fit content,它完全符合OP的要求,可以如下使用:
width: -moz-fit-content;
虽然它只在Firefox上运行,但我找不到其他浏览器(如Chrome)的等效版本。