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

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

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

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

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

Ответ 1

попробуйте следующее:

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

Ответ 2

display:block;
width:auto;

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

Ответ 3

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

h3 ~ * { display: block }

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

Ответ 4

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

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

h3 {
  display: inline-block;
}

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

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

Ответ 5

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

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

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

Ответ 6

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

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