Verschachtelte vertikale und horizontale Listen?

Ich versuche ein html/css-Experiment, wo alles und alle Formatierung mit unformatierten Listen durchgeführt wird (List-style-type: none). Was ich tun möchte, ist in der Lage zu sein, eine vertikale Liste in einer horizontalen Liste einzubetten und umgekehrt. Bis jetzt kann ich eine horizontale Liste (li ... display: inline;) in eine vertikale Liste einbetten und es funktioniert, aber ich kann nicht scheinen, eine vertikale Liste als wirklich vertikal in einer horizontalen Liste anzuzeigen.Verschachtelte vertikale und horizontale Listen?

Hier ist mein CSS-Code bisher:

* { 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;}

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

Bisher ist der "secondlist" nicht als eine vertikale Liste innerhalb der horizontalen verhalten. Irgendwelche Ideen? Grundsätzlich möchte ich die meisten meiner Web-Design als Listen von Listen haben, so dass ich anfangen kann, über eine DSL zu denken, um damit umzugehen. Ich weiß, viele DSL existieren bereits für HTML/CSS-Markup, aber ich möchte die Kontrolle über die CSS-Seite der Dinge gewinnen.

Quelle

2012-04-08 galaxybeing

Ich würde sagen, ein display:block

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

und eine andere Sache funktionieren würde, weil Sie den Rand und die Polsterung 0px im Universalselektor gesetzt, (*) ist es nicht notwendig ist, an einem anderen Ort zu tun , es sei denn, Sie möchten einen anderen Rand/Abstand.

Quelle

2012-04-08 15:59:23

Dank Andres. Das hat geholfen. Aber würde es einen Weg geben, die Fortsetzung des "horizontallist" Flushs gegen die Spitze zu haben? Mit Ihrem Vorschlag habe ich "den Schnee in Alaska". und "der Regen in Spanien." Fortsetzung neben "Zweite in der zweiten vertikalen Liste". Ich würde sie gerne an der Spitze neben "Erste in der zweiten vertikalen Liste" mögen. erscheint wie ein quasi-Dropdown-Menü in einer horizontalen Liste eingebettet. – galaxybeing

Ich verstehe, was Sie sagen, aber ich weiß nicht, ob das möglich ist. Es könnte möglich sein, aber ich weiß nicht, wie es geht. Ich würde Divs verwenden, aber Sie sagen, Sie wollen nur Listen verwenden. Um es zusammenzufassen, ich weiß es nicht. –

Wenn ich ein paar schieben
wie folgt "

Sekunde in horizontaler Liste.

Mit extra Text.

" es tatsächlich die vertikale Liste nach oben verschieben. Aber das ist ein ziemlich hässlicher Klotz. – galaxybeing

Ich bin mir nicht sicher, ob das gemeint ist.

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

Quelle

2014-10-19 21:27:42

Verschachtelte vertikale und horizontale Listen?

Antwort

Verwandte Themen