html - HTML+CSS：结合/和假表格格式

Question

我有一个要以 HTML 格式显示的分层表。<ul>和标签适用于事物的<ol>分层部分，但我希望总共有 2 或 3 列，其中最左边的列按层次缩进，例如

• 富
  • foo1
  • foo2
    • foo2a
  • foo3
    • foo3a
    • foo3b
• 酒吧
  • 酒吧1
    • 酒吧1a
    • 酒吧1b
  • 酒吧2

但我也希望每个项目在右侧的列上都有一些相应的信息。

如何使用 HTML 和 CSS 做到这一点？

Answer 1

带桌子。

但我也希望每个项目在右侧的列上都有一些相应的信息。

那是表格信息。

否则，您可能可以使用<ol>/<ul>并使每个元素成为<dl>(definition list)，以使其看起来像表格的方式设置样式，例如将每个元素<dd>向右浮动。

<ol>
  <li>
    <dl>
      <dt>element 1</dt>
      <dd>corresponding information 1.1</dd>
      <dd>corresponding information 1.2</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>element 2</dt>
      <dd>corresponding information 2.1</dd>
    </dl>
  </li>
<ol>