Have Geek Brain

Organizing lists in HTML / CSS

I have a list and I need two sections in each item. I also need the first fixed width section. How do I encode it?

I've tried using definition lists:

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

    </dl>

... and lists of users with a range:

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

    </ul>

None of them worked. Are there any canonical ways to do this?

+1


a source to share


6 answers


The way I came up with may not be canonical (but only because I'm not sure there are "canonical" means of implementing it), but it works:

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


The demo version works there: http://www.davidrhysthomas.co.uk/so/lists.html .

+1


a source


As Alan said, but if you just place the div it won't work the way you want, try this:

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


(perhaps you would like to use a class instead of repeating the style attribute every list item)

+2


a source


The width does not extend to tags <span>

as they are inline. Try replacing the tag with <div>

or <p>

or any other block element.

+1


a source


Use dl and float dt to the left.

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


a source


try either a label for the first part or an inline div

0


a source


I would like to ask: is this for tabular data presentation? We were instructed to think HTML tables are evil, but for showing, well, data tables, they're perfect. I've seen more than one coder and duplicates the tag functionality <table>

with <div>

and CSS.

Of course, if it isn't, then please continue. :-)

0


a source






More articles:


All Articles