html - CSS Treeview(嵌套列表)，显示为表格

Question

我想获得一个表格，如 HTML 结构的显示，其中嵌套列表 + 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

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

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

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

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