如果这个问题已经在 stackoverflow 上陈述过,请纠正我!如果有,我深表歉意,但我一直在寻找一段时间,只找到了如何而不是为什么。
我的问题是:父 div 似乎会自动占据页面的整个宽度,除非 { display: inline-block; }
是为它指定的。指定后,它会根据其子元素的宽度调整其宽度。这确实很有用,但我觉得了解为什么会发生这种情况对我来说很重要。这是一些用于视觉表示的代码。提前致谢!
编辑:我看到有些人将我的问题标记为重复,但请告诉我在另一个问题中它解释了为什么 display inline-block 会自动调整到它的 child 的高度和宽度。谢谢!
#wrapper {
border: 1px solid black;
display: inline-block;
}
#child_div {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}
<div id="wrapper">
<div id="child_div"></div>
</div>
最佳答案
display: inline-block
基本上是 display: inline;
(span
的默认值, strong
、em
等)和 display: block;
(默认为 div
、p
等)。
内联元素是为文本构建的,因此它们应该与文本内联,并且只和它们包含的文本一样宽。因此,您无法设置 inline
元素的宽度。
block 元素默认填充所有可用宽度,因此在它们自己的行上而不是内联流动。这对于段落之类的内容很有用,但有时您需要较短的行,因此可以调整 block
元素的宽度。
行内 block 元素在中间。它们像 display: inline;
元素一样以内联方式流动,但你可以像 display: block;
元素一样设置宽度。
关于html - 为什么 inline-block 会根据它的 child 的宽度自动调整它的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41800125/