在 CSS 中使用分层列表制作表格答案

【问题标题】：Making Tables Out of Hierarchical Lists in CSS在 CSS 中使用分层列表制作表格
【发布时间】：2009-08-20 17:00:29
【问题描述】：

这应该很容易，或者可能是不可能的:)

我有这种 HTML 输出

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

我希望它显示为

one two three
    a   b

如何使用纯 CSS 做到这一点？如有必要，我可以在一定程度上修改 HTML（但我宁愿不这样做）。

【问题讨论】：

您确定要让 b 出现在三个下面吗？如果三个列表项也有一个子列表怎么办 - 那会去哪里？
wheresrhys，实际上，不，我希望 a 向左对齐，但我是在询问后才意识到的。问题似乎是这样的：我认为我无法阻止 HTML 分层（换句话说，a 和 b 始终是两者的子级）。

标签： css styling

【解决方案1】：

您问的是“纯”CSS。纯 CSS 是为工作使用最好的语义标签，这意味着如果你真的有表格数据，看起来可能就是这样，那么你应该使用表格。

【讨论】：

只是在想同样的事情，我打算将它添加到问题中。问题是我必须进入那里并使用生成 HTML 的模板，但是是的，我想这就是我得到报酬的原因。谢谢。
+1。多年来，表格在页面布局中被过度使用（当时没有好的替代品），因此受到了不好的包装。但是，将 HTML 表格用于表格数据并没有错。事实上，它通常是最简洁、最简单且最适合跨浏览器的方式。
如果您无法控制 HTML 怎么办？然后你会在下面使用 Zac 的答案。

【解决方案2】：

您可以通过一些浮动和绝对定位来完成此操作

ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul.first {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 30px; left: 0; margin-top: 30px;}
ul.second {position: absolute; top: 30; left: 50;}

和

<ul class="first">
   <li>one</li>
   <li>two
      <ul class="second">
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

【讨论】：

真的吗？我得马上试试这个。如果它有效，您将赢得最佳答案和我永远的感激之情，直到项目得到改变并且这个答案甚至没有被使用:)

【解决方案3】：

你可以使用css标签“list-style-type:none”即

ul li { 列表样式类型：无；显示：内联； }

ul li ul li { 列表样式类型：无；显示：内联； }

【讨论】：

这是第一步，但它并不完整，因为它不会按照他的意愿排列。
哎呀忘了你必须添加一个“显示：内联；”也是。
好的，这很酷，但问题是——而且它可能在 CSS 中无法解决——是将第二行作为第二行，而不是打断第一行。
使用您当前的 HTML，我很确定如果不使用 CSS2 子选择器并定位每个元素，您将无法完成它。

【解决方案4】：

为了进一步了解 Zac 的回答，您可以在不修改 HTML 的情况下进行 CSS 寻址。然后它看起来像这样：

<style>
ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul  {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 20px; left: 0; margin-top: 30px;}
ul li ul {position: absolute; top: 20; left: 0;}
</style>

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

【讨论】：