La organización de las listas en HTML / CSS

Question

Tengo una lista y necesito dos secciones en cada elemento. También necesito la primera sección para ser de ancho fijo. ¿Cómo debo codificarlo?

He intentado usar listas de definición:

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

    </dl>

... y listas de usuarios con el palmo:

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

    </ul>

Ni trabajado. ¿Existe alguna forma canónica de hacer eso?

Answer 1

La forma en que se me ocurrió es, tal vez, no canónica (pero sólo porque no estoy convencido de que hay una 'canónica' significa de su aplicación), pero funciona:

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

Hay una demostración de trabajo más en: http://www.davidrhysthomas.co.uk/so/lists.html .

Answer 2

Al igual que Alan dijo, pero si usted acaba de poner un div que no va a funcionar de la manera deseada, intente esto:

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

(quizá desea utilizar una clase en vez de repetir el estilo de atributos de cada elemento de la lista)

Answer 3

Ancho no se aplica a <span> etiquetas, ya que están en línea. Trate de reemplazar la etiqueta con un <div> o <p> o cualquier otro elemento de bloque.

Answer 4

Utilice un dl y flotar el DT a la izquierda.

<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

tratar ya sea una etiqueta para la primera parte o un div inline

Answer 6

Me gustaría preguntar: ¿se trata de representar los datos tabulares? Hemos sido adoctrinados en el pensamiento de que las tablas HTML son malos, pero para mostrar, así, una tabla de datos, son perfectos. He visto más de un codificador tratar de duplicar la funcionalidad de la etiqueta <table> usando <div>s y CSS.

Por supuesto, si no es así, por favor, seguir adelante. : -)