让文本“显示：内联”的简单方法当它嵌套在大约 5 个生成的 DIV 标签中时？

Question

我可以使用“display:inline”将 CSS 类添加到最外层的 DIV 和最内层的 DIV 标签，但是，我无法在中间添加 CSS 类。

标记是这样的...

<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;
}

这使得 myDiv div 和所有从 myDiv 派生的 div 元素显示为内联。

HTML：

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

演示：http://jsfiddle.net/waitinforatrain/nTPZY/