liste horizontale imbriquée à l'aide CSS

Question

Je suis en train de créer une liste horizontale à partir d'un balisage de liste imbriquée, comme un exemple, j'ai le balisage actuel:

<ul> 
<li class="alone">List Item 1</li> 
<li class="alone">List Item 2</li> 
<li class="alone">List Item 3</li> 
<li class="group">List Item 4 
    <ul> 
    <li class="not_alone">List Item 4a</li> 
    <li class="not_alone">List Item 4b</li> 
    <li class="not_alone">List Item 4c</li> 
    <li class="not_alone">List Item 4d</li> 
    </ul> 
</li> 
<li class="alone">List Item 5</li> 
</ul> 

je voudrais obtenir quelque chose de similaire à ceci:

<style> 
div { display: inline-block; } 
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; } 
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; } 
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; } 
.item { padding: 2px; margin: 0 2px; } 
</style> 
<div class="wrapper"> 
    <div class="alone item">List Item 1</div> 
    <div class="alone item">List Item 2</div> 
    <div class="alone item">List Item 3</div> 
    <div class="group item"> 
    List Item 4 
    <div class="group item">List Item 4a</div> 
    <div class="group item">List Item 4b</div> 
    <div class="group item">List Item 4c</div> 
    <div class="group item">List Item 4d</div> 
    </div> 
    </div> 
    <div class="alone item">List Item 5</div> 
</div> 

Vous pouvez voir une démo ici http://jsbin.com/exivi5. Est-ce possible en utilisant le balisage de liste imbriqué existant? Aussi, puis-je également garder la largeur de la liste des parents ul à 100% afin qu'elle corresponde à la fenêtre entière?

Ceci doit être compatible avec FF, Webkit et IE7 + mais se contentera du support d'IE8 +.

Merci d'avance!

Answer 1

essayer d'ajouter ces règles CSS:

ul {list-style: none; margin: 0; padding: 0; float:left; display: inline;} 
ul li {float:left; display: inline; margin: 0 5px; padding: 3px 2px;} 
ul li ul {float:right;} 
h2 {clear: left;} 

avec un peu de jongler avec des marges & rembourrages il devrait regarder le même que le vôtre

Answer 2

Si vous ajoutez le style

display:block; 

de la li se rendre en tant que des éléments de niveau bloc, et vous devriez alors être en mesure de les coiffer juste comme l'exemple à base Div. Vous pourriez avoir besoin de les faire flotter à gauche pour les obtenir l'un à côté de l'autre exactement comme votre page d'exemple. (Ou utiliser inline-block à la place du bloc peut-être)

Essayez ceci (je n'ai pas testé ce que je suis sur mon petit ordinateur portable - ceci est basé sur la mémoire/devinettes)

<style> 
    #horizontallist li { display: block; float:left; } 
    .alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; } 
    .group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; } 
    .group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; } 
    .item { padding: 2px; margin: 0 2px; } 
</style> 

<ul id="horizontallist"> 
    <li class="alone item">List Item 1</li> 
    <li class="alone item">List Item 2</li> 
    <li class="alone item">List Item 3</li> 
    <li class="group item">List Item 4 
     <ul> 
     <li class="group item">List Item 4a</li> 
     <li class="group item">List Item 4b</li> 
     <li class="group item">List Item 4c</li> 
     <li class="group item">List Item 4d</li> 
     </ul> 
    </li> 
    <li class="alone">List Item 5</li> 
</ul> 

Answer 3

Try this (nécessite jQuery):

var wrapper = $("body").append("<div id='wrapper'></div>").find("#wrapper"); 

var lis = $("ul > li"); 

lis.each(function() { 
    var li = $(this); 
    if (li.hasClass("alone")) wrapper.append("<div class = 'alone item' >" + li.text() + " </div>"); 
    else if (li.hasClass("group")) { 
     var html = "<div class='group item'>"; 
     li.find("li").each(function() { 
      html += "<div class = 'group item' >" + $(this).text() + " </div>"; 
     }); 
     html += "</div>"; 
     wrapper.append(html); 
    } 
}); 

Démo: http://fiddle.jshell.net/EJZMS/show/light/

code: http://fiddle.jshell.net/EJZMS/

Mon code n'est pas récursif: Si vous avez plus d'un niveau d'imbrication, vous devrez le modifier vous-même.