我对 html 和 css 还很陌生。我需要在 1 行中显示两个 h3 元素。我正在尝试使用 display:inline-block，但它以我意想不到的方式工作。这是 fiddle 示例 http://jsfiddle.net/4NrXF/31/ .
这里我提供了 4 种不同的使用 inline-block 属性的选项。
我需要在第一行显示文本“Some text before”，在第二行显示文本“Display text”。如您所见-第一个选项仅生成一行，这对我来说不合适。我认为 4 选项可以正常工作，但如您所见，由于某种原因它不会生成“DISPLAY TEXT”行。为什么 inline-block 会这样工作？
这是我使用的 html 和 css:
Some text before
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>
<h3 > DISPLAY </h3>
<h3 > TEXT </h3>
<h3 class="a"> DISPLAY </h3>
<h3 > TEXT </h3>
text before
<h3 > DISPLAY </h3>
<h3 class="a"> TEXT </h3>
.a {display: inline-block}
最佳答案
“之前的文本”是一个内联元素。如果你想把它放在自己的行上，你可以使用你的选项 4 和包含在 block 元素中的“之前的文本”，比如 p
<p>Some text before</p>
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>
关于html - 为什么内联 block 以这种方式工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31511978/