我的布局类似于：
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
尝试使用width:max-content属性根据div的内容大小调整其宽度。
试试这个例子，
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
其他回答
如果你有容器破坏了行，在几个小时后寻找一个好的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>
您需要一个具有CSS所称的收缩以适应宽度的块元素，而规范并没有提供一种获得这种东西的好方法。在CSS2中，缩小尺寸并不是一个目标，而是指处理浏览器“必须”凭空获得宽度的情况。这些情况包括：
浮动绝对定位元件内联块元素表元素
当没有指定宽度时。我听说他们想在CSS3中添加你想要的内容。现在，就用上面的一个吧。
不直接曝光该功能的决定可能看起来很奇怪，但有充分的理由。它很贵。缩小到适合意味着至少设置两次格式：在知道元素的宽度之前，不能开始设置元素的格式，并且不能计算整个内容的宽度。此外，人们不需要像想象的那样经常收缩以适应元素。为什么你的桌子周围需要额外的div？也许你只需要表格标题。
我尝试了div.classname｛display：table cell；｝，结果成功了！
评论中提到了这一点，在其中一个答案中很难找到：
如果出于任何原因使用display：flex，则可以改用：
div {
display: inline-flex;
}
这在浏览器中也得到广泛支持。
尝试使用width:max-content属性根据div的内容大小调整其宽度。
试试这个例子，
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
width: max-content;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>
