1

HTML 代码：

<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/运行此代码

我对输出不满意。.key我希望“Lorem Ipsum”文本与课堂内的粗体文本整齐地分开。所以我希望当长的“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.

你能帮我么？

如果我使用无序列表解决这个问题的整个方法似乎是错误的，请建议我解决这个问题的正确方法。

4

3 回答 3

4

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

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

jsFiddle 示例

请注意，display:table-cell;在 IE<8 中不起作用

于 2013-09-25T16:50:50.363 回答
1

您可以绝对定位键，然后根据需要调整 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;
}
于 2013-09-25T16:55:34.437 回答
0

孤独，

最佳做法是用另外一个元素包装您的文本，并使用浮点作为键和边距作为文本包装器。

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

于 2013-09-25T17:45:29.283 回答