Besoin d'aide pour afficher les listes d'enfants sans espacer les listes des parents

Question

J'imprime une liste des majors collégiales que nous offrons, puis dans chaque majeure, nous avons des concentrations pour chaque majeure.

Notre science Major a les concentrations suivantes: sciences de l'environnement & foresterie, chiropractie, Chimie, Biologie

Voici une capture d'écran de ce qu'il fait: alt text http://i38.tinypic.com/28r2vk7.jpg

Je ne veux pas l'espacement il affiche (je ne veux pas l'espacement que vous voyez après la gestion des ressources humaines AAS et après la psychologie.) dans la capture d'écran, toute aide est appréciée.

La source ressemblerait à ceci:

<ul class="majors-list"> 
    <li>Major 
     <ul class="concentrations-list"> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
     </ul> 
    </li> 
    <li>Major 
     <ul class="concentrations-list"> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
     </ul> 
    </li> 
    <li>Major 
     <ul class="concentrations-list"> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
     </ul> 
    </li> 
    <li>Major 
     <ul class="concentrations-list"> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
      <li>Concentration Item</li> 
     </ul> 
    </li> 
</ul> 

Voici le CSS:

.col-middle .majors-list li{ 
    list-style-type:none; 
    width:50%; 
    float:left; 
    margin-bottom:2px; 
} 

.col-middle ul.majors-list{ 
    margin-left:0; 
} 

.col-middle ul.concentrations-list{ 
    overflow:auto; 
} 

.col-middle .concentrations-list li{ 
    float:none; 
} 

Answer 1

Sans un peu de javascript, vous ne serez pas en mesure de le faire. Avec mozilla ou webkit vous pouvez utiliser - [moz | webkit] -column-count: 2; mais même cela ne va pas vous donner la même solution que le css donné vous fournit presque, en d'autres termes l'ordre sera vertical au lieu d'horizontal. Quand je jouais avec la propriété count-column, les listes internes étaient également réparties sur les colonnes, ce qui ne serait pas suffisant non plus. Une solution javascript, qui je crois pourrait être accomplie assez facilement avec un framework comme jquery, prendrait probablement chacun des éléments li et les positionnerait dynamiquement avec une combinaison de position: relative et position: attributs absolus et un peu de maths.

Answer 2

flotteur Essayez: droite au lieu de float: left.

Cela fonctionne pour Firefox 2. Ne fonctionne pas avec (beaucoup) d'autres navigateurs.

Answer 3

Vous souhaitez attribuer à la classe concentrations-list une propriété display: none; en CSS. Vous pouvez ensuite afficher l'un des sous-listes en lui attribuant l'événement onclick qui change la classe en concentrations-list-showing et en ajoutant une classe concentrations-list-showing au CSS et en lui attribuant une propriété display: block;.

Answer 4

Vous pouvez le faire avec des colonnes CSS3 mais je suppose que vous avez besoin de cela pour travailler dans ce navigateur.

Answer 5

Une chose que vous pouvez essayer est de faire votre affichage ul.majors-list: inline; (ou inline-block) et flotter: à gauche; Il peut travail.

---

ci-dessus aurait dû être "essayer de faire vos ul.majors liste affichage li: inline;". Mais je n'arrive pas à le faire fonctionner simplement avec ça rapidement. Je ne sais pas comment vous allez pouvoir faire cela sans se débarrasser des ul les plus haut et juste faire chacun leur propre liste.