每行内部跨越一段

Question

我有：

name: james

但我想表现为：

name:
james

Here's a live example of this

HTML 标记：

<p>
<span class="bla">name:</span>
<span class="bla">james</span>
</p>

CSS 标记：

.bla {
 display: inline-block;   
}​

提前致谢

Answer 1

如果您想通过向inline-block类添加样式来实现此目的，那么

.bla将无法实现您的目标。请尝试将其更改为display:block。

请参阅我的示例：http://jsfiddle.net/n1ck/NNpqq/1/

.bla {
 display: block;   
}​

或者您可以添加一些标记： http://jsfiddle.net/n1ck/NNpqq/5/

<p>
    <span class="bla">name:</span> <br />
    <span class="bla">james</span>
</p>
​

Answer 2

怎么样

<p>
<span class="bla">name:</span><br/>
<span class="bla">james</span>
</p>

http://jsfiddle.net/luissanchezm86/NNpqq/

Answer 3

你可以尝试

.bla {
 display:block;   
}​

Answer 4

这就是好先生所打破的。

<p>
    name:<br/>james
</p>

http://jsfiddle.net/NNpqq/4/

Answer 5

刚刚提出：

<p>name:<br/>James</p>

...你可以摆脱CSS。如果您需要调整行高，请通过CSS将其应用于“br”标记。

作为旁注，请勿在HTML标记中重复“bla”类（除非您有特定的理由这样做）。您可以通过<p>父级访问它以减少标记并使代码更清晰：

CSS:
p.bla {}
p.bla span {}

HTML:
<p class="bla">
  <span></span> 
  <span></span>
</p>