Question

HTML code：

<ul>
    <li>
        <span class="key">Foo:</span>
        Lorem ipsum dolor sit amet
    </li>
    <li>
        <span class="key">Bar:</span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </li>
    <li>
        <span class="key">FooBar:</span>
        Lorem ipsum dolor sit amet
    </li>
    <li>
        <span class="key">Foo:</span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </li>    
</ul>

CSS：

li {
    list-style: none;
    background: lightblue;
    margin-bottom: 1em;
    padding: 5px;
    border-radius: 5px;
}

li .key {
    display: inline-block;
    width: 6em;
    font-weight: bold;
}

在http://jsfiddle.net/Bjpzm/

运行此代码

我对输出不满意。我希望“Lorem Ipsum”文本与.key类中的粗体文本整齐地分开。所以我希望当长“Lorem Ipsum”文本换行时，包裹的行不会从每个蓝色框的最左边开始。相反，包裹的行应该从每个文本的第一个单词的正下方开始。

让我以ASCII格式演示当前输出的内容和我想要的内容。

当前输出如下：

Foo:     Lorem ipsum dolor sit amet

Bar:     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

FooBar:  Lorem ipsum dolor sit amet

Foo:     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.

但我想要这个：

Foo:     Lorem ipsum dolor sit amet

Bar:     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
         diam nonummy nibh euismod tincidunt ut laoreet dolore magna
         aliquam erat volutpat.

FooBar:  Lorem ipsum dolor sit amet

Foo:     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
         diam nonummy nibh euismod tincidunt ut laoreet dolore magna
         aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
         nostrud exerci tation ullamcorper suscipit lobortis nisl ut
         aliquip ex ea commodo consequat.  Duis autem vel eum iriure
         dolor in hendrerit in vulputate velit esse molestie consequat,
         vel illum dolore eu feugiat nulla facilisis at vero eros et
         accumsan et iusto odio dignissim qui blandit praesent luptatum
         zzril delenit augue duis dolore te feugait nulla facilisi.

你能帮帮我吗？

如果我使用无序列表解决此问题的方法似乎有误，请建议我解决此问题的正确方法。

Answer 1

如果您将非跨度内容包装在<p>这样的标记中，那么您可以使用此CSS来获得您想要的内容：

li .key {
    display: table-cell;
    width: 6em;
    font-weight: bold;
}
p {
    display:table-cell;
}

jsFiddle example

请注意，display:table-cell;在IE＆lt; 8

中不起作用

Answer 2

您可以绝对定位键，然后根据需要调整li的CSS。 http://jsfiddle.net/Bjpzm/19/

li {
    list-style: none;
    background: lightblue;
    margin-bottom: 1em;
    padding: 5px;
    border-radius: 5px;
    position:relative;
    padding-left:6em;
}

li .key {
    display: inline-block;
    width: 6em;
    font-weight: bold;
    position:absolute;
    left:5px;
}

Answer 3

龙，

最佳做法是用另外一个元素包装文本，并使用float to key和margin to text wrapper。

<ul>
    <li>
        <span class="key">Foo:</span>
        <span class="keyDesc">Lorem ipsum dolor sit amet</span>
    </li>
    <li>
        <span class="key">Bar:</span>
        <span class="keyDesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
    </li>
</ul>

和CSS：

li {
    list-style: none;
    background: lightblue;
    margin-bottom: 1em;
    padding: 5px;
    border-radius: 5px;
}

li .key {
    width: 6em;
    font-weight: bold;
    float:left;
}

.keyDesc {
    margin-left:7em;
    display:block;
}

完成！这样，即使您没有密钥，keyDesc项也始终与其他keyDesc对齐。

演示：http://jsfiddle.net/mp4PG/

如何在列表项中对齐包裹的行？

3 个答案: