Question

我正在使用递归DL元素，如下所示：

<dl>
  <dt>1</dt>
  <dl>
      <dt>1.1</dt>
      <dl>
         <dt>1.1.1</dt>
      </dl>
  </dl>
</dl>

在Firefox中，它呈现如下：

1
   1.1
       1.1.1

但是在Chrome和Internet Explorer上我只能得到：

1

1.1

1.1.1

如何编写在Firefox上渲染类似的代码和Chrome / Internet Explorer。一些特殊的造型 DL与CSS？我更喜欢Firefox渲染。

P.S。：通常dl至少有一个dd或dt。定义是<!ELEMENT dl (dt|dd)+>。所以我想这是允许的只有dt而没有dd。但是，非正统的，是在dl中有一个dl。

Answer 1

添加此css：

dl:not(:first-child) {
    /* "dl dl" and "dl ~ dl" are also possible solutions.
       They will work on old browsers, too */
    margin-left: 20px;
}

此代码将在除第一个标记之外的所有dl标记上设置边距。

Demo working on both Chrome and Firefox

Answer 2

在内部<dd></dd>周围添加<dl></dl>对也没有CSS的工作：

<dl>
    <dt>1</dt>
    <dd><dl>
        <dt>1.1</dt>
        <dd><dl>
            <dt>1.1.1</dt>
        </dl></dd>
     </dl></dd>
</dl>

在所有3个浏览器中呈现如下：

1
   1.1
       1.1.1

另见http://jsfiddle.net/C98NX/1/。

再见

DL堆叠，我错过了一些CSS吗？

2 个答案: