2

例如，我对使用 inline-block 感到非常困惑：

html...

<div id="main">
  <div class="one">inline-block</div>
  <div class="two">inline-block</div>
</div>

有时inline-block用 for 时有效#main，有时用 to 时有效.one，.two有时用 for 时无效#main，有时用 to 时无效.one，.two

任何人都可以正确描述内联块的时间和原因吗？

编辑

我的意思是设置也可以将 inline-block设置display: inline-block;为and元素而不设置为and ，但我不知道为什么？#main.one.twodisplay: inline-block;.one.two

4

1 回答 1

4

内联块演示

我在http://jsfiddle.net/audetwebdesign/NxMLu/上设置了一个 Fiddle来说明四个场景：

考虑以下代码：

<div class="main">
  <div class="inner one">inline-block</div>
  <div class="inner two">inline-block</div>
</div>

和以下CSS：

.main {
    outline: 2px dotted blue;
    padding: 5px;
}
.one, .two {
    outline: 1px dotted blue;
}
.ex2 .inner {
    display: inline-block;
}
.ex3.main {
    display: inline-block;
}
.ex4.main, .ex4 .inner {
    display: inline-block;
}

示例 1：所有块

默认情况下，<div>元素显示为块，并且它们的宽度会拉伸以填充屏幕的宽度。

示例 2：孩子是内联块

在这种情况下，子<div>元素显示为inline-block，因此它们的宽度缩小以适应，并且它们并排显示在全宽父元素中。

示例 3：parent 是一个内联块

在这种情况下，父元素的宽度是缩小以适应内容，子元素的宽度也是缩小以适应但每个子元素都在单独的行上，因为它们仍然是块级元素。

示例 4：父元素和子元素是内联块

与示例 3 类似，子元素并排显示，因为它们现在处于内联流上下文中。

何时使用内联块

当inline-block您需要将顶部和底部边距或填充应用于需要出现在单行上的元素时，显示类型很有用，例如水平导航栏。元素的主要优点inline-block是它们会响应text-align: center声明，因此您可以将所有元素居中在一行中，并对边距和填充有一些控制。

于 2013-04-21T15:38:51.167 回答