Organiser des listes en HTML/CSS

Question

J'ai une liste et j'ai besoin de deux sections dans chaque article. J'ai aussi besoin que la première section soit de largeur fixe. Comment dois-je le coder?

J'ai essayé d'utiliser des listes de définition:

<dl> 
     <dt style="width: 2em;">foo</dt><dd>bar</dd> 
    ... 

    </dl> 

... et listes d'utilisateurs avec Envergure:

<ul> 
     <li><span style="width: 2em;">foo<span>bar</li> 
    ... 

    </ul> 

Ni travaillé. Existe-t-il des moyens canoniques de le faire?

Answer 1

La façon dont je suis venu avec est, peut-être, non canonique (mais seulement parce que je ne suis pas convaincu qu'il ya un « canonique » les moyens de mise en œuvre), mais il FONCTIONNE:

<style type="text/css" media="screen"> 

     #container 
      {width: 50%; 
      margin: 0 auto; 
      } 

     ol, 
     ul {border: 1px solid #ccc; 
      width: 90%; 
      padding: 1.4em 0; 
      } 

     ol li, 
     ul li {background-color: #ccc; 
      margin-left: 20%; 
      } 

     ol li span.list-head, 
     ul li span.list-head 
      {background-color: #ffa; 
      float: left; 
      display: block; 
      width: 6em; 
      } 

     dl {border: 1px solid #ccc; 
      line-height: 1.4em; 
      padding: 1.4em 0 0 0; 
      } 

     dl dt {background-color: #ffa; 
      display: block; 
      margin: 0; 
      width: 10%; 
      } 

     dl dd {background-color: #fc0; 
      display: block; 
      margin: 0; 
      width: 88%; 
      margin-left: 11%; 
      position: relative; 
      top: -1.4em; 
      }  

    </style> 
... 
    <div id="container"> 

     <ol> 

      <li><span class="list-head">Foo:</span> bar.</li> 

      <li><span class="list-head">Bar:</span> baz.</li> 

      <li><span class="list-head">Baz:</span> foo.</li> 

     </ol> 

     <ul> 

      <li><span class="list-head">Foo:</span> bar.</li> 

      <li><span class="list-head">Bar:</span> baz.</li> 

      <li><span class="list-head">Baz:</span> foo.</li> 

     </ul> 

     <dl> 

      <dt>Foo:</dt> 
      <dd>bar.</dd> 

      <dt>Bar:</dt> 
      <dd>baz.</dd> 

      <dt>Baz:</dt> 
      <dd>foo.</dd> 

     </dl> 

    </div> 

Il y a une démo de travail sur: http://www.davidrhysthomas.co.uk/so/lists.html.

Answer 2

La largeur ne s'applique pas aux variables <span> car elles sont en ligne. Essayez de remplacer l'étiquette par <div> ou <p> ou par tout autre élément de bloc.

Answer 3

Comme Alan dit, mais si vous mettez juste un div il ne fonctionnera pas comme vous le voulez, essayez ceci:

<ul> 
    <li><div style="width: 200px; display: inline-block;">foo</div>bar</li> 
    <li><div style="width: 200px; display: inline-block;">foo12</div>bar</li> 
    <li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li> 
    <li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li> 
</ul> 

(peut-être vous souhaitez utiliser une classe au lieu de répéter l'attribut de style chaque élément de la liste)

Answer 4

essayer soit une étiquette pour la première partie ou une ligne div

Answer 5

Utilisez un dl et laisser flotter le dt à gauche.

<style type="text/css"> 
dt {clear:left; float:left; width: 8em;} 
</style> 

<dl> 
    <dt>foo<dt> 
    <dd>bar</dd> 
    <dt>foo1<dt> 
    <dd>bar1</dd> 
    <dt>foo12345<dt> 
    <dd>bar</dd> 
</dl> 

Answer 6

Je voudrais demander: est-ce pour représenter les données tabulaires? Nous avons été endoctrinés en pensant que les tableaux HTML sont mauvais, mais pour montrer, bien, un tableau de données, ils sont parfaits. J'ai vu plus d'un codeur essayer et dupliquer la fonctionnalité de la balise <table> en utilisant <div> s et CSS.

Bien sûr, si ce n'est pas le cas, continuez. :-)