Organizzare liste in HTML / CSS

Question

Ho una lista e ho bisogno di due sezioni in ciascuna voce. Inoltre devo la prima sezione di essere di larghezza fissa. Come dovrei codificarlo?

Ho provato con liste di definizione:

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

    </dl>

... e elenchi di utenti con luce:

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

    </ul>

Nessuno dei due ha lavorato. Ci sono modi canonici per farlo?

Answer 1

Il modo in cui mi è venuta è, forse, non canonica (ma solo perché io non sono convinto che ci sia un 'canonica' dei mezzi di attuazione), ma funziona:

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

C'è una demo di lavoro oltre a: http://www.davidrhysthomas.co.uk/so/lists.html .

Answer 2

Come Alan detto ma se hai appena messo un div che non funziona nel modo desiderato, provate questo:

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

(forse si desidera utilizzare una classe invece di ripetere l'attributo dello stile di ogni voce dell'elenco)

Answer 3

Larghezza non si applica ai <span> tag come sono in linea. Provare a sostituire il tag con un <div> o <p> o qualsiasi altro elemento di blocco.

Answer 4

Utilizzare un dl e galleggiare il dt a fianco.

<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

provare uno un'etichetta per la prima porzione o un div linea

Answer 6

vorrei chiedere: è questo per rappresentare dati tabulari? Siamo stati indottrinati a pensare che le tabelle HTML sono il male, ma per mostrare, così, una tabella di dati, sono perfetti. Ho visto più di un codificatore cercare di duplicare la funzionalità del tag <table> utilizzando <div>s e CSS.

Naturalmente, se non lo è, allora per favore, portare avanti. : -)