Mise en page d'une liste HTML dans espacés de manière égale dans les colonnes

Je voudrais proposer une liste comme celle-ci 2/3 uniformément espacés colonnes

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

Une solution consiste à scinder la liste en deux listes et le flotteur de l'un d'eux à droite, peut-être avec une marge, par exemple

  <div id="col2">
    <ul>
      <li>one<li>
      <li>two<li>
      <li>three<li>
      <li>four<li>
      <li>five<li>
    </ul>
  </div>

  <ul>
    <li>six<li>
    <li>seven<li>
    <li>eight<li>
    <li>nine<li>
  </ul>

#col2 {
    float: right;
    margin-right: 450px;
}

Cela fonctionne OK, mais a un certain nombre de lacunes:

  1. (Onu)balisage sémantique - ce n'est pas vraiment 2 listes, j'ai partagé une seule liste en 2, juste pour rendre les choses plus faciles à coiffer
  2. La marge doit être réglé manuellement pour quelque chose qui donne l'impression d'être régulièrement espacées
  3. Si le navigateur est suffisamment étroit, la colonne de droite, vers le deuxième.

Est-il une meilleure façon de le faire, de préférence sans l'aide d'une table?

Mise à jour:

J'ai essayé Méthode 1, mais je vois de drôles de résultats. Si vous regardez cette 3-liste des colonnes sur vous verrez qu'il y a des "trous" dans les 2 premières colonnes. Aucune idée pourquoi?

Avez-vous donné les éléments d'une hauteur fixe?

OriginalL'auteur Dónal | 2009-02-17

  1. 14

    Cet article à partir d'Une Liste, en dehors couvre la plus communément admise, de la proximité du best-practices-que-nous-pouvons-obtenir des méthodes pour faire ce que vous décrivez.

    Holy crap, c'est un très long article pour ce que j'avais espéré être une tâche relativement simple. Merci pour le lien!
    Comme une liste non-ordonnée au lieu d'une liste ordonnée, vous pouvez simplement aller avec la Méthode 1.
    Grand lien. C'est une de ces choses qui semble comme il devrait être simple, mais n'est pas dans la pratique.

    OriginalL'auteur Rex M

  2. 0

    Je ne sais pas si vous souhaitez 2 directement en dessous de 1, ou si elle peut être à côté de 1 comme:

        1    2    3
    4    5    6

    Parce que si c'est le cas, vous pouvez donner à votre li'une largeur fixe de 33% et les faire flotter ou de les afficher en ligne.

    Edit: c'est en fait la méthode 1 de l'article Rex M visée (seulement le lire, nice):

    Vous pouvez utiliser le html c'est déjà là, le premier de la liste et ajouter les styles:

    ul {
    width: 100%;        //for example
}
li {
    float: left;        //option 1
    display: inline;    //option 2, just one of the two
    width: 33%;         //for 3 columns, use 50% for two columns
}

    Son tout dans l'article.

    Si possible, pourriez-vous montrer le HTML/CSS pour votre suggestion?

    OriginalL'auteur jeroen

  3. 0

    Hauteur de <li>-s est différent. Essayez de fixer la hauteur d'un élément de liste dans le css.
    Vous pouvez également utiliser quelque chose comme

    border: 1px solid red;

    Comme l'une des règles pour l'élément de la liste pour voir ce qu'il se passe.

    Je vote pour une table, ici aussi, depuis l'utilisation de la méthode des sauts de l'ordre des éléments. Mais si ce n'est pas un problème pour vous, puis aller de l'avant.

    OriginalL'auteur clorz

  4. -1

    Pourquoi, sans l'aide d'une table? C'est précisément quelles tables sont destinées.

    Ive a eu à maintenir des listes qui ont été divisés en différentes colonnes de la table et une seule liste est beaucoup plus facile à entretenir.
    Je suis d'accord avec jeroen. L'OP a une seule liste d'entités - pas de données tabulaires. Un UL ou DL est le meilleur choix à mon humble avis, même si c'est un peu délicat à mettre en forme.
    Je suis en désaccord que c'est précisément ce qu'un tableau est destiné. L'OMI, d'une table de données tabulaires avec les lignes, les colonnes, en-têtes, pieds de page, les légendes, etc. Ce que j'ai, c'est simplement une liste que je tiens à disposition sur un certain nombre de colonnes.
    curran non, les tables sont des tables. les listes sont des listes. les divs et les CSS sont pour la structuration de choses visuellement. C'est une liste.

    OriginalL'auteur James Curran