В CSS, что может быть лучше для принудительного разрыва строки после элемента, чем сделать его блочным элементом?

Question

У меня есть заголовок H3, который я хотел бы стилизовать как имеющий определенный цвет фона, но без того, чтобы фон элемента занимал всю ширину родительского элемента.Поскольку H3 по умолчанию является блочным элементом, мой стиль должен был бы изменить элемент на элемент inline-block или просто встроенный элемент inline, например, так:

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

Это будет работать нормально, но толькоесли сразу за ним следует блочный элемент.Я не хочу менять разметку только для удовлетворения этого стиля, поэтому мне было интересно, есть ли способ заставить любой соседний элемент, независимо от того, как он отображается, запускаться на следующей строке?

ПредположимЯ могу использовать CSS3.

Answer 1

попробуйте это:

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

Answer 2

Как часто случается, что элемент после <h3> является встроенным элементом?(Обычно после заголовка должны быть <p>, <ul> или другие блочные элементы, хотя это полностью зависит от вашего HTML. Это предсказуемо? Можно ли просто повернуть каждый элемент, который следует непосредственно за <h3>в блочный элемент?

h3 ~ * { display: block }

Единственный другой способ, которым я знаю, что блочный элемент не занимает все пространство, это плавающий, но это оставляет другую проблему.

Answer 3

display:block;
width:auto;

Это сделает ширину как можно меньше (не заполняя весь родительский элемент) и заставит другие элементы появляться ниже.

Answer 4

Я все время сталкиваюсь с этим в своем коде, обычно для div, которые встроены в блок.Лучший способ, который я видел, это форсировать новую строку - заключить ваш код в дополнительный div.Ваш исходный html получит форматирование, которое вы ожидали, и оболочка div заставит новую строку.

Предполагая, что это ваш стиль h3,

h3 {
  display: inline-block;
}

Затем просто оберните его в div.

<div>
   <h3>My heading</h3>
</div>

Answer 5

Если вам не нужно центрировать h3, это может помочь:

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

Answer 6

Мне пришлось сделать нечто подобное со встроенными навигационными элементами, которые нужно разбить в определенных точках.Это работает?

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

Кажется, я помню, что IE7 имел проблему с ним.