6

<p>同じ行でフォローを取得することに成功しましたが<h>、新しい行でこれを繰り返したいのですが、次<h>は最後の行からフォローして<p>います - どうすればよいですか?

さまざまな「クリア」オプションを試しましたが、インラインを壊すものはありません。私は実際に<br>は空のを使用したり、持ったりしたくありません。<p><div>

inline注 - 2 番目の<h>要素から を削除しようとし<h>ましたが、新しい行に配置<p>されますが、次の要素も独自の新しい行になります。

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<h5 class="inline newline">Next Heading:</h5>

<p class="inline">Some more text.</p>

これは私が達成したい結果です:

見出し:いくつかのテキスト。

次の見出しもう少しテキスト。

しかし、代わりに私はこれを得ています:

見出し:いくつかのテキスト。次の見出しもう少しテキスト。

任意の提案 - コードをできるだけシンプルですっきりと保つようにしてください。

[アップデート]

とりあえず、hafid2com が提案するように、次を使用して空の div を追加します (目的の結果を得るために高さを追加するだけです)。

.clear { clear: both; display: block; content: ""; width: 100%; }

<div class="clear"></div>

フィドルに示すように：http://jsfiddle.net/rxAnk/5/

4

5 に答える 5

6

これを追加：

HTML:

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

CSS:

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}
于 2013-04-28T15:00:27.297 に答える
2

目的の効果を得るには、いくつかの方法があります。

1）次floatの代わりに使用できますdisplay：

<style type="text/css">
    h5 {float:left;clear:left;}
    p {float:left;}
</style>

<h5>Heading:</h5>
<p>Some text.</p>
<h5>Next Heading:</h5>
<p>Some more text.</p>

2)タグ<strong>の代わりに使用<h5>して、見出しをタグ内に配置できます (タグ内が無効で<p>あることを指摘してくれた @Ralph.m に感謝します)。<h5><p>

<p><strong>Heading:</strong> Some text.</p>
<p><strong>Next Heading:</strong> Some more text.</p>

3）スタイルを保持して、それぞれをdisplay:inline;ラップすることができます：<h5><p><div>

<style type="text/css">
    h5, p {display:inline;}
</style>

<div>
    <h5>Heading:</h5>
    <p>Some text.</p>
</div>
<div>
    <h5>Next Heading:</h5>
    <p>Some more text.</p>
</div>
于 2013-04-28T13:43:28.127 に答える
1

追加のマークアップを手動で挿入したくない場合は、改行を挿入して使用:beforeし、空白で折り返すように設定するこのアプローチを試してください。\A、または\00000aは、CSS が受け入れる ISO-10646 文字コード (U+000A) です。

http://jsfiddle.net/TwoD/ujhwLouc/

CSS

.inline {display: inline;}
h5.inline.newline:before {content: '\A'; white-space:pre-line;}

HTML

<h5 class="inline">Heading:</h5>
<p class="inline">Some text.</p>   
<h5 class="inline newline">Next Heading:</h5>
<p class="inline">Some more text.</p>
于 2015-09-20T07:04:28.887 に答える
1

ここで本当に正しいマークアップを使用しているかどうか疑問に思います。HTML マークアップは表示用ではなく、セマンティックであることに注意してください。H5 を使用することは、H4 などで始まるコンテンツを分割するのに役立たない限り、めったに良いセマンティクスではありません。

ここでの文脈を知らなくても、私は次のようなことを提案します：

<style type="text/css">
  p span {font-weight: bold;}
</style>

<p><span>Heading:</span> Some text.</p>
<p><span>Next Heading:</span> Some more text.</p>

もちろん、見出しが本当に必要な場合は、 に置き換えますが、<p>これ<hx>が適切かどうかは疑問です。

(余談ですが、floatisの代わりになります。しかし、 a の中にdisplay: inline-blockan を入れ子にしないでください。有効なコーディングではないためです。)<h5><p>

于 2013-04-28T14:49:10.683 に答える