CSS 树视图（嵌套列表），显示为 table

Question

我想为 HTML 结构获得一个 table 的显示，其中嵌套列表 + dl/dt/dd 列表作为给定行的单元格。

到目前为止，这是我能做的：

使用代码：

<ul class="treeview">
  <li>
    <dl>
      <dt>item1</dt>
      <dd>
        <input type="checkbox" />
      </dd>
      <dd>
        <input type="checkbox" />
      </dd>
      <dd>
        <input type="checkbox" />
      </dd>
    </dl>
    <ul>
      <li class="last">
        <dl>
          <dt>subitem</dt>
          <dd>
            <input type="checkbox" />
          </dd>
          <dd>
            <input type="checkbox" />
          </dd>
          <dd>
            <input type="checkbox" />
          </dd>
        </dl>
      </li>
    </ul>
  </li>
  <li>
    <dl>
      <dt>item2</dt>
      <dd>
        <input type="checkbox" />
      </dd>
      <dd>
        <input type="checkbox" />
      </dd>
      <dd>
        <input type="checkbox" />
      </dd>
    </dl>
  </li>
</ul>

和CSS：

ul.treeview li dl dt,
ul.treeview li dl dd {
  display: inline-block;
}

ul.treeview li dl dt {
  width: 200px;
}

ul.treeview li dl dd {
  width: 50px;
}

https://jsfiddle.net/wt6gd2f2/

问题出在嵌套列表上，其复选框未与子级列表对齐。知道怎么做吗？

Answer 1

这主要是因为默认的填充和边距，所以你必须先重置它们。

nested li（一个新的默认填充，你可以设置为任何值）：

li ul { padding-left:25px; }

日：

ul.treeview li dl dd { margin:0; }

.. 现在你可以添加一个负边距（到第一个！）dd 把它带到左边：

ul.treeview li ul dl dd:first-of-type { margin-left:-25px; }

您可以直接跳到最后一行，但是由于每个浏览器都有自己的默认值margins/paddings，最好自己设置缩进。

新 CSS:

ul.treeview li dl dt,
ul.treeview li dl dd {
  display: inline-block;
}

ul.treeview li dl dt {
  width: 200px;
}

ul.treeview li dl dd {
  width: 50px;
  margin: 0;
}

ul.treeview li ul {
  padding-left: 25px;
}

ul.treeview li ul dl dd:first-of-type {
  margin-left:-25px;
}

CSS 树视图（嵌套列表），显示为 table

CSS Treeview (nested lists), display as table

html

css

treeview

multiple-columns