Простой способ получить текст для отображения: встроенный, когда он вложен в 5 сгенерированных тегов DIV?

Question

Я могу добавить класс CSS к самому внешнему DIV и самым внутренним тегам DIV с помощью display: inline, но я не могу сделать это с некоторыми промежуточными значениями.

Разметка примерно такая ...

<span>ABC</abc>
<div>
  <div>
    <div>
       XYZ
    </div>
  </div>
</div>

Я бы хотел, чтобы текст ABC находился в одной строке с текстом XYZ, но из-за тегов DIV они расположены в отдельных строках.

Answer 1

Что ж, если у вас есть причина иметь так много вложенных элементов div (вы не можете изменить HTML и т. Д.), Вы можете применить класс к крайнему элементу div, а затем использовать наследование для применения display: inline;

HTML

<span>ABC</abc>
<div class="wrapper">
  <div>
    <div>
       XYZ
    </div>
  </div>
</div>

CSS

.wrapper, 
.wrapper div {
    display: inline;
}

Answer 2

Добавить класс к внешнему div, например myDiv

CSS:

.myDiv, .myDiv div {
    display: inline;
}

Это делает div myDiv и все элементы div, которые происходят от отображения myDiv, встроенными.

HTML:

<span>ABC</span>
<div class="myDiv">
  <div>
    <div>
       XYZ
    </div>
  </div>
</div>

Демо: http://jsfiddle.net/waitinforatrain/nTPZY/