我的布局类似于：
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
如果你有容器破坏了行，在几个小时后寻找一个好的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>
其他回答
修订版（如果您有多个孩子，则适用）：您可以使用jQuery（查看JSFiddle链接）
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
不要忘记包含jQuery。。。
在此处查看JSfiddle
您可以选择高度：100%和宽度。这使得div不大于其内容。
我认为使用
display: inline-block;
但我不确定浏览器的兼容性。
另一种解决方案是将您的div包装在另一个div中（如果您想保持块行为）：
HTML格式：
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
不知道这将出现在什么上下文中，但我相信CSS样式的属性float（向左或向右）将产生这种效果。另一方面，它也会有其他副作用，例如允许文本在其周围浮动。
如果我错了，请纠正我，我不是100%确定，目前无法自己测试。
display：inline块为元素添加额外的边距。
我建议这样做：
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖金：你现在只需添加margin:0auto，就可以轻松地将这个新奇的#元素居中。
