css - 在 CSS 中使用分层列表制作表格

Question

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

我有这种 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（但我宁愿不这样做）。

Answer 1

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

Answer 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>

Answer 3

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

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

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

Answer 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>