html - ぶら下げインデント付きインラインリスト

Question

HTML では、次のような順序付けられていないリストをレイアウトしています。

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

「Fruit:」という単語を生成コンテンツとして扱っています。リストを折り返して、2 行目が最初の「Apple」と左揃えになるようにしたいと考えています。

これに対する私の現在の試みはhereです。葉巻のない奇妙な間隔を強調するために、背景色を含めました.

Answer 1

これはおそらく正確な正しい方法ではありませんが、-4emを-2.2emに変更するだけでうまくいくようです。ブラウザ間またはフォントサイズの変更でどのようにテストするかはわかりませんが、開始点として機能します。

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

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

更新：このメソッドは、フォントサイズが増減すると機能しなくなります。

Answer 2

必要なことは通常、定義リストを使用して行われます。それに応じてスタイルを設定する必要があります。

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

Answer 3

OK、これが私が思いついたものです。マージンの代わりにポジショニングを使用しているため、少し醜いように見えますが、機能します。私はまだ他の解決策を受け入れています。

関連部分：

    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;
        }