html - 每行跨越段落内

Question

我有：

name: james

但我想显示为：

name:
james

HTML标记：

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

CSS标记：

.bla {
 display: inline-block;   
}

提前致谢

score 11 · Accepted Answer

inline-block如果您想通过向类添加样式来实现这一点，则不会实现您所追求的.bla。尝试将其更改为display:block。

.bla {
 display: block;   
}

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

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

score 2 · Accepted Answer

怎么样

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

score 1 · Accepted Answer

1

你可以试试

.bla {
 display:block;   
}

于 2012-05-31T23:48:11.553 回答

score 1 · Accepted Answer

1

先生，这就是休息的意义。

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

于 2012-05-31T23:48:49.610 回答

score 1 · Accepted Answer

只是说：

<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>

5 回答 5