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，display: inline-block;

时，它不起作用

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

修改

我的意思是将#main设置为.one，同时将.two和display: inline-block;元素设置为内联块，而不将.one设置为.two和{ {1}}，但我不知道为什么？

Answer 1

内联阻止演示

我在http://jsfiddle.net/audetwebdesign/NxMLu/设置了一个小提琴，以说明四种情况：

请考虑以下代码：

<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声明，因此您可以将所有元素放在一行中，并对边距和填充进行一些控制。

何时以及为何使用display inline-block

1 个答案: