在HTML组织名单/ CSS

Question

我有一个列表，我需要在每个项目两个部分。我还需要第一部分是固定的宽度。我应该如何编写呢？

我使用定义列表的尝试：

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

    </dl>

...和用户列表与跨度：

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

    </ul>

但是都没有成功。是否有任何规范的方式来做到这一点？

Answer 1

我想出的方法是，也许，不规范的（但只是因为我不相信有一个“规范”实施它的意思），但它的工作：

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

有超过一个的工作演示： http://www.davidrhysthomas.co.uk/so/lists.html 。

Answer 2

像艾伦说，但如果你只是把一个div它不会工作，你所希望的方式，尝试这个办法：

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

（也许你想使用一类，而不是重复的样式属性每个列表项的）

Answer 3

宽度并不适用于<span>标签，因为他们是内联。尝试用<div>或<p>或任何其它块的元件替换标签。

Answer 4

使用的DL和浮动dt的左侧。

<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

尝试或者用于所述第一部分的标记物或内联的div

Answer 6

我想问：这是用来表示表格数据？我们一直在灌输以为HTML表格是邪恶的，而是用于显示，好了，数据表格，他们是完美的。我见过不止一个编码器尝试使用<table>s和CSS复制<div>标签的功能。

当然，如果不是，那么请矣。 ： - ）