html - 带有悬挂缩进的内联列表

Question

在 HTML 中，我正在布置一个类似这样的无序列表：

Fruit: Apple, Banana, Cherry, Durian...

我将“水果：”一词视为生成的内容。我希望列表能够换行，以便第二行与第一个“Apple”齐平。

我目前的尝试是在这里。我已经包含了一个背景颜色，只是为了突出奇怪的接近但没有雪茄的间距。

Answer 1

这可能不是完全正确的方法，但只需将 -4em 更改为 -2.2em 似乎就可以解决问题。不确定它如何跨浏览器或字体大小更改进行测试，但它可以作为一个开始：

li:first-child:before {
    content: 'fruits: ';
    margin-left: -2.2em;
}

http://jsfiddle.net/2t8cq/4/

更新：此方法确实会随着字体大小的增加或减少而失效。

Answer 2

好的，这就是我想出的。它使用定位而不是边距，这看起来有点难看，但确实有效。我仍然对其他解决方案持开放态度。

相关部分：

    ul {
        margin: 0 0 0 4em;
        padding: 0;
        position: relative;
        }
    li {
        margin: 0;
        padding: 0;
        display: inline;
        background-color: #ccc;
        list-style: none;
        }
li:first-child:before {
        content: 'Fruit: ';
        position: absolute;
        left: -3em;
        }

Answer 3

您需要的通常是使用定义列表完成的。您将需要相应地对其进行样式设置。

<dl>
     <dt>Fruit:</dt>
     <dd>Apple</dd>
     <dd>Banana</dd>
</dl>