Создание таблиц из иерархических списков в 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 без каких-либо изменений HTML. Тогда это будет выглядеть так:

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

Answer 4

Вы можете использовать тег css «list-style-type: none», т. Е.

ul li { list-style-type: нет; дисплей: встроенный; }

ul li ul li { list-style-type: нет; дисплей: встроенный; }