16


1

CSSでは、ブロック要素にするよりも、要素の後に改行を強制するより良い方法は何ですか?

特定の背景色を持つようにスタイルを設定したいが、要素の背景が親要素の幅全体を占めることのないH3見出しがあります。 H3はデフォルトではブロック要素であるため、私のスタイルでは、要素をインラインブロック要素に変更するか、インラインインライン要素に変更する必要があります。

h3 {
    background-color: #333;
    color: white;
    display: inline-block;
}

これは正常に機能しますが、直後にブロック要素が続く場合のみです。 このスタイルに合わせてマークアップを変更したくないので、表示方法に関係なく、隣接する要素を次の行から開始する方法があるかどうか疑問に思っていましたか?

CSS3を使用できると仮定します。

6 Answer


12


これを試して:

h3:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


2


display:block;
width:auto;

これにより、幅が可能な限り小さくなり(親要素全体を埋めない)、他の要素が下に表示されます。


2


どのくらいの頻度で、「

インライン要素ですか? (通常、ヘッダーの後には、「

, ``

または他のブロック要素。ただし、これはHTMLに完全に依存します。 予測可能ですか? ``の直後にあるすべての要素をオンにするだけのオプションですか?

ブロック要素に?

h3〜* {display:block}

ブロック要素がすべてのスペースを占有しないことを知っている唯一の他の方法は、それをフローティングにすることですが、これは別の問題を残します。


1


通常、インラインブロックされているdivの場合、コードでこれに常に遭遇します。 私が見た最良の方法は、新しい行を強制することです。追加のdivでコードをラップすることです。 元のhtmlが期待した書式を取得し、divラッパーが新しい行を強制します。

これがあなたのh3スタイリングであると仮定すると、

h3 {
  display: inline-block;
}

次に、divにラップします。

   My heading


0


特定のポイントでブレークする必要があるインラインナビゲーションアイテムで、同様のことをしなければなりませんでした。 これは機能しますか?

h3:after {
  content: "\A ";
  line-height: 0;
  white-space: pre;
  display:inline-block;
}

IE7に問題があることを覚えているようです。


0


h3を中央に配置する必要がない場合、これが役立つ場合があります。

h3 {
  background-color: #333;
  color: white;
  display: inline-block;
  float: left;
  clear: left;
}