DL堆叠,我错过了一些CSS吗?

时间:2014-05-30 16:49:15

标签: html css

我正在使用递归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。

2 个答案:

答案 0 :(得分:2)

添加此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

答案 1 :(得分:0)

在内部<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/

再见