html - 文本后面带有背景颜色的多个 div

Question

我正在尝试在文本后面添加背景色。我会有多个这样的元素。

我目前遇到的问题是，为了使背景颜色“适合”文本，我使用了“显示:内联”属性。然而，问题是对于下一个元素，我需要它出现在新的一行，而不是在同一行。

当前情况如何:

我如何需要它:

这是我启动的 JSFiddle:http://jsfiddle.net/KFYyd/5/

HTML:

<div class="text">This is text.</div>
<div class="text">This is text.</div>

CSS:

.text {
  display: inline;
  background: black;
  color: white;
  padding: 5px;
}

请帮忙。

Answer 1

将 div 显示为内联 block 并在它们之间添加换行符。

HTML:

<div class="text">This is text.</div><br>
<div class="text">This is text.</div>

CSS:

.text {
    display: inline-block;
    background: black;
    color: white;
    padding: 5px;
    margin-bottom: 5px;
}