HTML + CSS:结合<UL>/<OL>和faux-tabular格式

Question

我有一个我想用HTML显示的分层表.在<ul>和<ol>标签工作的伟大事物的层次的一部分,但我想有2分或3列总计在最左侧的列层次缩进,如

• FOO
  • foo1
  • foo2的
    • foo2a
  • foo3
    • foo3a
    • foo3b
• 酒吧
  • BAR1
    • bar1a
    • bar1b
  • BAR2

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

我怎么能用HTML和CSS做到这一点？

Answer 1

有一张桌子.

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

这是表格信息.

否则,您可以使用<ol>/ <ul>并使每个元素成为一个<dl>(定义列表),以这样的方式设置样式以使其看起来像表格,例如通过<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>