Question

我是html和css的新手。我需要在一行中显示两个h3元素。我正在尝试使用display:inline-block，但它对我来说意想不到的方式。这是小提琴示例http://jsfiddle.net/4NrXF/31/。在这里，我提供了4种使用内联块属性的不同选项。我需要在第一行显示文本“之前的一些文本”，并在第二行显示文本“显示文本”。如您所见 - 第一个选项只生成一行，这对我来说不合适。我认为4选项将正常工作，但正如您所看到的那样，由于某种原因不会生成“DISPLAY TEXT”行。为什么内联块会像这样工作？
这是我使用的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}

Answer 1

“之前的文字”是一个内联元素。如果你想在它自己的行上，你可以使用你的选项4和“text before”包装在一个块元素中，比如p

<p>Some text before</p>
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>

为什么内联块以这种方式工作？

1 个答案: