我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
评论中提到了这一点,在其中一个答案中很难找到:
如果出于任何原因使用display:flex,则可以改用:
div {
display: inline-flex;
}
这在浏览器中也得到广泛支持。
其他回答
width:1px;
white-space: nowrap;
对我来说很好:)
在Firebug中我发现了属性值-moz fit content,它完全符合OP的要求,可以如下使用:
width: -moz-fit-content;
虽然它只在Firefox上运行,但我找不到其他浏览器(如Chrome)的等效版本。
如果你有容器破坏了行,在几个小时后寻找一个好的CSS解决方案,但没有找到,我现在使用jQuery代替:
$('按钮').click(函数){$('nav ul').each(函数){$parent=$(this).parent();$parent.width($(this).width());});});导航{显示:内联块;文本对齐:向左;/*不会做任何事,不像一些人可能会猜测的那样*/}上一页{显示:内联;}/*所需样式*/上一页{填充:0;}正文{宽度:420px;}/*恰到好处的风格*/正文{背景:#ddd;边距:1em自动;}按钮{显示:块;}导航{背景:#bbb;边距:1rem自动;衬垫:0.5rem;}李{显示:内联块;宽度:40px;高度:20px;边框:实心薄#777;边距:4px;背景:#999;文本对齐:居中;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>修复</button><导航><ul><li>3个</li><li></li><li>1个</li><li>4个</li></ul></nav><导航><ul><li>3个</li><li></li><li>1个</li><li>4个</li><li>1个</li><li>5个</li><li>9个</li><li>2个</li><li>6个</li><li>5个</li><li>3个</li><li>5个</li></ul></nav>
我们可以对div元素使用以下两种方法中的任意一种:
display: table;
or,
display: inline-block;
我更喜欢使用display:table;,因为它自己处理所有额外的空间。而display:inline块需要一些额外的空间修复。
个人而言,我只是这样做:
HTML代码:
<div>
<table>
</table>
</div>
CSS代码:
div {
display: inline;
}
如果在div上应用浮点数,它也会起作用,但显然,您需要在下一个HTML元素中应用“清除两者”的CSS规则。