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

DD

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

CSS Treeview（嵌套列表），显示为表格

1 个答案: