Вложенные вертикальные и горизонтальные списки?

Я пробовал эксперимент html/css, где все и все форматирование выполняется с помощью неформатированных списков (list-style-type: none). То, что я хочу сделать, - это возможность встраивать (в любом случае) вертикальный список в горизонтальном списке и наоборот. До сих пор я могу вставлять горизонтальный список (li ... display: inline;) в вертикальном списке, и он работает, но я не могу показать вертикальный список по вертикали внутри горизонтального списка.Вложенные вертикальные и горизонтальные списки?

Вот мой CSS код до сих пор:

* { margin:0; padding:0; } 
body { margin: 0px; color:#333; } 
ul.mainlist { list-style-type:none; margin: 0px; } 
.mainlist li { margin:0px; padding:0px; } 
ul.horizontallist { list-style-type:none; margin: 0px; padding:0px; } 
.horizontallist li { margin:0px; padding:0px; display: inline-block; } 
ul.secondlist { list-style-type:none; margin: 0px; padding:0px; } 
.secondlist li { margin:0px; padding:0px;}

И мой HTML:

<body> 
    <ul class="mainlist"> 
     <li> 
     <ul class="horizontallist"> 
      <li> 
      <ul class="secondlist"> 
       <li>First in second vertical list.</li> 
       <li>Second in second vertical list.</li> 
      </ul> 
      </li> 
      <li>the snow in Alaska.</li> 
      <li>the rain in Spain.</li> 
     </ul> 
     </li> 
     <li>Part of Mainlist</li> 
    </ul> 
    </body>

До сих пор "secondlist" не ведет себя как вертикальный список внутри горизонтали. Есть идеи? В принципе, я бы хотел, чтобы большая часть моего веб-дизайна была списком списков списков, чтобы я мог придумать DSL для ее обработки. Я знаю, что многие DSL существуют уже для разметки html/css, но я бы хотел получить контроль над css-частью вещей.

источник

2012-04-08 galaxybeing

Я бы сказал display:block будет работать

.secondlist li { margin:0px; padding:0px; display:block;}

и другую вещь, потому что вы установили поля и отступы для 0px в универсальный селектор (*) не надо делать в любом другом месте , если вы не хотите другого поля/дополнения.

источник

2012-04-08 15:59:23

Спасибо Andres. Это помогло. Но был ли бы способ продолжения «горизонтального» флеша против вершины? С твоим предложением у меня есть «снег на Аляске». и "дождь в Испании". рядом с «Второй во втором вертикальном списке». Я бы хотел, чтобы они были наверху рядом с «Сначала во втором вертикальном списке». появляясь как квазивыходное меню, встроенное в горизонтальный список. – galaxybeing

Я понимаю, что вы говорите, но я не знаю, возможно ли это. Возможно, это возможно, но я не знаю, как это сделать. Я бы использовал divs, но вы говорите, что просто хотите использовать списки. Подводя итог, я не знаю. –

Если я засунул несколько
«

Второй в горизонтальном списке.

С дополнительным текстом

« он действительно перемещает вертикальный список вверх. Но это довольно уродливый клоч. – galaxybeing

Я не уверен, что это то, что вы имели в виду.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
* {margin:0;padding:0;} 
body {color:#333;} 
ul.mainlist, ul.mainlist ul {list-style-type:none;} 
ul.mainlist li, ul.horizontallist {display:inline-block;vertical-align:top} 
ul.secondlist li {display:block} 
</style> 
</head> 

<body> 
<body> 
<ul class="mainlist"> 
     <li> 
       <ul class="horizontallist"> 
         <li> 
           <ul class="secondlist"> 
             <li>First in second vertical list.</li> 
             <li>Second in second vertical list.</li> 
             <li>Third in second vertical list.</li> 
           </ul> 
         </li> 
         <li>the snow in Alaska.</li> 
         <li>the rain in Spain.</li> 
       </ul> 
     </li> 
     <li>Part of Mainlist</li> 
</ul> 
</body> 
</html>

источник

2014-10-19 21:27:42

Вложенные вертикальные и горизонтальные списки?

ответ

Смежные вопросы