En CSS, quel est le meilleur moyen de forcer un saut de ligne après un élément plutôt que de le transformer en élément de bloc?

J'ai un H3-tête que j'aimerais style comme ayant une couleur de fond particulière, mais sans avoir l'élément de fond de prendre toute la largeur de l'élément parent. Voyant que H3 est par défaut d'un élément de bloc, mon style serait nécessaire de changer l'élément à un inline-block élément, ou tout simplement un inline inline comme suit:

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

Cela fonctionne bien, mais seulement si elle est immédiatement suivie par un élément de type block. Je ne veux pas changer le balisage juste pour répondre à ce style, donc je me demandais si il existe un moyen de causer de tout élément adjacent, indépendamment de la façon dont il affiche, pour commencer sur la ligne suivante?

Supposons que je peux utiliser CSS3.

source d'informationauteur Nathan Ridley | 2010-09-21

  1. 12

    essayez ceci:

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

    Cela va faire de la largeur la plus petite possible (pas de remplissage de l'ensemble de l'élément parent) et d'apporter d'autres éléments s'affichent ci-dessous.

  3. 2

    Combien de fois se fait-il que l'élément après la <h3> est un élément inline? (Généralement après un en-tête, il devrait être comme un <p><ul> ou d'autres éléments de bloc, même si cela dépend totalement de votre html. Est-il prévisible? Est-il une option de simplement tourner chaque élément qui le suit directement un <h3> dans un élément de type block?

    h3 ~ * { display: block }

    Le seul autre moyen que je connais pour avoir un bloc-élément à ne pas occuper tout l'espace est flottant, mais cela reste un autre problème.

  4. 1

    Je viens à travers ce tout le temps dans mon code, en général pour les div qui sont inline-block ed. La meilleure façon que j'ai vu est à la force, une nouvelle ligne est d'envelopper votre code dans une autre div. L'original de votre html obtient la mise en forme que vous attendiez, et la div wrapper forces une nouvelle ligne.

    En supposant que cela soit votre h3 style,

    h3 {
  display: inline-block;
}

    Puis il suffit de l'envelopper dans un div.

    <div>
   <h3>My heading</h3>
</div>
  5. 0

    J'ai eu à faire quelque chose de similaire avec inline nav articles qui ont besoin de briser à certains points. Ce travail?

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

    Il me semble me rappeler IE7 avoir un problème avec elle.

  6. 0

    Si vous n'avez pas besoin de centre de h3, cela peut vous aider:

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