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代わりに変更してみてください。

私の例を参照してください: 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>

score 2 · Accepted Answer

どうですか

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

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>

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 に答える

5 に答える 5