html - 何时以及为何使用显示内联 block

Question

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

html...

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

有时inline-block当我使用 #main 时有效有时当我使用 .one 时它会起作用, .two有时当我使用 #main 时它不起作用有时当我使用 .one 时它不起作用, .two

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

编辑

我的意思是设置display: inline-block;至#main还将内联 block 设置为 .one和.two没有设置的元素display: inline-block;至.one和.two ，但我不知道为什么？

Answer 1

内联 block 演示

我在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:所有 block

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

示例 2:子级是内联 block

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

示例 3:父级是内联 block

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

示例 4:父元素和子元素是内联 block

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

何时使用内联 block

inline-block当您需要将顶部和底部边距或填充应用于需要显示在单行上的元素(例如水平导航栏)时，显示类型非常有用。主要优势inline-block元素的特点是它们会响应 text-align: center声明，这样您就可以将所有元素集中在一行中，并对边距和填充进行一些控制。