在 HTML/CSS 中组织列表答案

【问题标题】：Organizing lists in HTML/CSS在 HTML/CSS 中组织列表
【发布时间】：2012-06-02 01:28:11
【问题描述】：

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

我尝试过使用定义列表：

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

    </dl>

... 和带有 span 的用户列表：

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

    </ul>

都没有用。是否有任何规范的方法可以做到这一点？

【问题讨论】：

他们不是……“用户”列表，而是“无序”：s
@Tordek：糟糕，我的猜测在这里误导了我。

标签： html css width html-lists

【解决方案1】：

就像 Alan 说的，但如果你只是放一个 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>

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

【讨论】：

我从来不知道存在内联块。谢谢。 :-)
@Victor：谢谢，但 inline-block 仅适用于 Firefox。你知道我怎样才能让它在 IE 中工作吗？好像 IE 根本不理解这个属性。
@Alex：对不起，我很害怕，但我无法测试 IE，因为我没有安装 Windows。也许当 IE 实现标准时:(

【解决方案2】：

我想出的方法也许不是规范的（但只是因为我不相信有一个“规范”的方法来实现它），但它确实有效：

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

【讨论】：

谢谢，这是一个非常好的教程:)

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

尝试为第一部分使用标签或内联 div

【讨论】：

【解决方案6】：

我想问一下：这是用来表示表格数据的吗？我们一直被灌输认为 HTML 表格是邪恶的，但是对于显示数据表格来说，它们是完美的。我见过不止一位程序员尝试使用<div>s 和CSS 来复制<table> 标签的功能。

当然，如果不是，请继续。 :-)

【讨论】：

当然我的数据可以放到表格中。我遵守列表政策，因为列表更适合 SEO。