Aide de la liste non ordonnée

Je dois boucler un tableau de liens pour un menu déroulant. Le menu déroulant est div fixe hauteur. J'ai besoin des liens pour remplir le div à partir du haut à gauche, vers le bas, puis quand la colonne est à la hauteur maximale (définie par le div environnant), il va commencer une nouvelle colonne du haut vers le bas comme indiqué ci-dessous.Aide de la liste non ordonnée

link one link four link seven 
link two link five link eight 
link three link six link nine

Je suis en train d'utiliser <ul> <li></li> </ul> mais je ne peux pas obtenir ma tête comment je vais le style vers le haut? si je le laisse flotter à gauche, il s'alignera à gauche, si je ne le fais pas il ne flottera pas à gauche pour commencer une nouvelle colonne?

C'est un fichier LIQUID donc je suis limité. (Liquide étant le type de fichier modèle Shopify)

Source

2011-03-20 Charles Marsh

Le nombre d'éléments 'li' va-t-il varier, ou sera-t-il toujours neuf? –

Vous pouvez accomplir cela avec des colonnes CSS3: http://www.quirksmode.org/css/multicolumn.html

Sinon, vous auriez besoin d'envelopper vos lignes dans un élément contenant qui est la hauteur de votre div et flotter ceux-ci. La seule autre façon que je pourrais voir faire avec JavaScript est que vous auriez encore besoin d'insérer une sorte de balisage supplémentaire pour y parvenir si vous n'utilisez pas de colonnes CSS3.

Source

2011-03-20 17:24:27

~~Je crains qu'un tel flux ne soit impossible en HTML/CSS comme c'est le cas aujourd'hui. Les choses vont de gauche à droite, puis de haut en bas. Pas l'inverse.~~ Droite. Colonnes CSS3. Je ne savais pas à propos de ceux-ci. P Thanks, Chris!

Quoi qu'il en soit, même si les colonnes CSS3 ne sont pas encore très largement supportées, la solution la plus simple consiste à donner à chaque élément une hauteur fixe, puis vous pouvez calculer chaque colonne dans votre code côté serveur. Il suffit d'émettre une norme <table> avec eux et d'en finir avec.

Sinon, vous pouvez utiliser Javascript pour mesurer chaque élément et effectuer la mise en page du côté client.

Source

2011-03-20 17:30:43

Si vous souhaitez une alternative à l'utilisation de CSS3, essayez ce A List Apart article on multi-column lists, qui a plusieurs méthodes pour diviser une liste en plusieurs colonnes. Je ne posterai pas de solution spécifique, car cela dépend de votre situation, mais j'ai essayé la méthode 6 et cela a fonctionné.

Source

2011-03-20 17:54:58

Je ne pense pas que ce soit une réponse aussi générale que ce que vous cherchez, mais en supposant certaines constantes (toujours neuf éléments, toujours 3 colonnes de 3 éléments) voici un exemple d'utilisation du positionnement relatif pour atteindre le Effet désiré:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head> 
     <title>Unordered list help/title> 
     <style type="text/css"> 
      #myList { 
       width:301px; 
       height:61px; 
      } 
      #myList li + li + li + li { 
       width:100px; 
       float:right; 
       clear:right; 
       position:relative; 
       top:-60px; 
       left:-100px; 
      } 
      #myList li + li + li + li + li + li + li { 
       position:relative; 
       left:0px; 
       top:-120px; 
      } 
      #myList li:first-child, 
      #myList li:first-child + li, 
      #myList li:first-child + li + li { 
       width:100px; 
      } 
     </style> 
    </head> 
    <body> 
     <ul id="myList"> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
      <li>Five</li> 
      <li>Six</li> 
      <li>Seven</li> 
      <li>Eight</li> 
      <li>Nine</li> 
     </ul> 
    </body> 
</html>

Source

2011-03-20 18:34:42

Aide de la liste non ordonnée

Répondre

Questions connexes