L'organisation des listes en HTML / CSS

Question

J'ai une liste et je besoin de deux sections dans chaque élément. Je dois aussi la première section à être d'une largeur fixe. Comment dois-je coder?

Je l'ai essayé d'utiliser des listes de définition:

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

    </dl>

... et des listes d'utilisateurs avec la durée:

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

    </ul>

Ni travaillé. Y a-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émonstration de travail sur à: http://www.davidrhysthomas.co.uk/so/lists.html .

Answer 2

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 que vous souhaitez utiliser une classe au lieu de répéter l'attribut style chaque élément de la liste)

Answer 3

Largeur ne concerne pas les <span> tags tels qu'ils sont en ligne. Essayez de remplacer l'étiquette avec un <div> ou <p> ou tout autre élément de bloc.

Answer 4

Utilisez un dl et 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 5

essayez soit une étiquette pour la première partie ou un div en ligne

Answer 6

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

Bien sûr, si ce n'est pas, alors s'il vous plaît, continuez. : -)