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 { list-style-type：none; 显示：内联; }

ul li ul li { list-style-type：none; 显示：内联; }

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>

用CSS中的层次列表制作表格

4 个答案: