Comment afficher une liste HTML non imbriquée?

Question

Voici le HTML

<ul> 
    <li>Salads</li> 
    <li>Fruits 
     <ul> 
      <li>Apples</li> 
      <li>Prunes</li> 
     </ul> 
    </li> 
    <li>Main Course</li> 
</ul> 

Voici à quoi il ressemble maintenant:

 
Salads Fruits 
    Apples Prunes 
Main Course 

Et voici ce que je voudrais que ça ressemble à:

 
Salads Fruits Main Course 
Apples Prunes 

Comment puis-je parvenir , sans en modifiant le code HTML?

CSS actuel:

ul { 
    list-style:none; 
    display:block; 
} 
li { 
    display:inline-block; 
} 

Answer 1

Il en résulte à l'écran:

Salads Fruits Main Course 
     Apples Prunes 

Voici le CSS je.

ul { 
    list-style:none; 
    display:block; 
    float: left; 
    clear: both; 
    width: 100%; 
} 

li { 
    display: inline; 
} 

Si vous ne voulez pas que les fruits individuels pour commencer un peu à travers la page - retirer le rembourrage avec cette règle de style:

ul > li > ul { 
    padding-left: 0; 
} 

Toutes ces va encore travailler si vous nid plus d'articles aussi. Par exemple:

<ul> 
    <li>Salads 
     <ul> 
      <li>Green Leaf</li> 
      <li>Chicken</li> 
     </ul> 
    </li> 
    <li>Fruits 
     <ul> 
      <li>Apples</li> 
      <li>Prunes</li> 
     </ul> 
    </li> 
    <li>Main Course</li> 
</ul> 

Answer 2

vous devrez appliquer des styles aux ULs INSIDE du lis. Essayez ceci

ul li { 
    float: left;   
} 

Answer 3

Vous devriez le style de la ul à l'intérieur du li, et l'intérieur du liul,

View demo here. J'espère que ça aide.

CSS pour un rapide coup d'oeil:

ul { 
    list-style:none; 
    display:block; 
    float: left; 
    clear: both; 
    width: 100%; 
} 
li { 
    display: inline; 
} 
ul > li > ul { 
    padding-left: 0; 
}