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/で実行します

私は出力に満足していません。「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.

手伝ってくれませんか？

順序なしリストを使用してこの問題を解決する私の全体的な方法が間違っていると思われる場合は、この問題を解決する正しい方法を教えてください。

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

孤独な、

ベスト プラクティスは、テキストをもう 1 つの要素でラップし、float をキーに、margin をテキスト ラッパーに使用することです。

<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 に答える