如何使div不大于其内容？

我的布局类似于：

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

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

当前回答

width:1px;
white-space: nowrap;

对我来说很好：）

2011-08-26 08:14:09

其他回答

这似乎是一个13年前的问题。

.div{
display:inline-block;
}

.div{
display:inline-flex;
}

现在可以工作几天，没有任何兼容性问题。

2022-07-05 11:10:37

我们可以对div元素使用以下两种方法中的任意一种：

display: table;

or,

display: inline-block;

我更喜欢使用display：table；，因为它自己处理所有额外的空间。而display:inline块需要一些额外的空间修复。

2016-09-30 05:00:55

好的，在很多情况下，您甚至不需要做任何事情，因为默认情况下，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>

2017-06-17 05:57:07

尝试使用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>

2020-08-31 09:30:01

如果你有容器破坏了行，在几个小时后寻找一个好的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>

2015-11-04 03:24:41

如何使div不大于其内容？

推荐文章

最新文章

标签