html - CSS を使用して 2 つの見出しを隣り合わせに配置するにはどうすればよいですか?

Question

<h5>Category</h5><h6>auto</h6>

次のように、 Categoryとautoを別々の行に配置します。

カテゴリー

このように、両方を同じ行に配置するにはどうすればよいですか?

score 29 · Accepted Answer

h(n) 要素は「ブロック」要素です。つまり、利用可能なすべての水平方向のスペースを占めるように成長します。これは、それらの「正しい」ものを次の行にプッシュすることも意味します。

これを実現する簡単な方法の 1 つは、ディスプレイをインラインに設定することです。

<style>
    h5, h6 {display:inline;}
</style>

すべてのブラウザーでサポートされているわけinline-blockではないことに注意してください。

ブロック要素をフロートすることもできますが、フロートはかなり複雑になる可能性があるため、厄介な問題になる可能性があります。このような場合はインラインを使用してください。

score 7 · Accepted Answer

7

<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>

于 2009-08-18T14:40:45.927 に答える

score 3 · Accepted Answer

要素の表示モードを変更する必要があります。H タグは、デフォルトで BLOCK 要素としてレンダリングされます。この動作をオーバーライドするには、次のスタイル定義を Web サイトまたは CSS に追加します。

h5,h6 { display: inline; }

次の方法で、それらを隣り合わせに「浮かせる」ようにすることもできます。

h5,h6 { float: left; }

フローティングはブロック要素でのみ機能することに注意してください (インライン要素はフロートできないため、両方のスタイルを使用してもフロートは実行されません)。