web-dev-qa-db-ja.com

CSSの番号なしリストをコンマ区切りテキストとしてスタイル設定する方法

CSSを使用してXHTMLの順序付けられていないリストのスタイルを設定し、インラインで表示され、リストアイテムがコンマで区切られるようにする方法を探しています。

たとえば、次のリストはApple, orange, bananaとしてレンダリングする必要があります（リストの最後にコンマがないことに注意してください）。

<ul id="taglist">
  <li>Apple</li>
  <li>orange</li>
  <li>banana</li>
</ul>

現在、このリストをスタイル設定するために次のCSSを使用しています。これはほぼ希望どおりですが、リストをApple, orange, banana,としてレンダリングします（バナナの後のコンマに注意してください）。

#taglist {
  display: inline;
  list-style: none;
}

#taglist li {
  display: inline;
}

#taglist li:after {
  content: ", ";
}

純粋なCSSでこの問題を解決する方法はありますか？

htmlcssxhtml
62
SwedishChef

末尾のコンマを削除するには、 :last-child 擬似クラス、次のように：

#taglist li:last-child:after {
    content: "";
}
66
Jakob

置換oneルール

#taglist li:after {
    content: ", ";
}

just別のもの

#taglist li + li:before {
    content: ", ";
}

長所：

  • 1つのルールですべての作業を実行します。
  • 前のルールをキャンセルするルールはありませんが、
  • IE8サポート
23
Vladimir Starkov

疑似セレクターlast-childとnotを一度に使用できるCSS3では簡単です。

ul#taglist li:not(:last-child):after {
    content: ", ";
}

ここで結果を確認してください https://jsfiddle.net/vpd4bnq1/

9
OzzyCzech

ブラウザの実装に依存しますが、これは機能するはずです。 first-childに依存していますが、これは使用を制限する可能性がありますが、本質的にはコンマスペース", "を後ではなくリスト項目の前に置きます。 padding/marginsがこれにどのように影響するかはわかりませんが、 `display：inline;を使用するとマージンとパディングがゼロに設定されていれば、大丈夫です。

#taglist li:before {content: ", ";}
#taglist first-child {content: ""; } /* empty string */

編集済み：Jakobのコメントで提供された修正に対応するため。

次の作品（デモページはこちら： http://davidrhysthomas.co.uk/so/liststyles.html ：

#taglist    {width: 50%;
        margin: 1em auto;
        padding: 0;
        }

li      {display: inline;
        margin: 0;
        padding: 0;
        }

li:before   {content: ", ";
        }

#taglist li:first-child:before
        {content: "";
        }

コンマは奇妙なことに中間のどこかに浮かんでいるが、正直なところ、私はとにかく受け入れられた答えを好む。しかし、ちょうどそうです、私は恐ろしく壊れた答えを横に置いていませんでした、私はそれを修正するべきだと思いました。

ありがとう、ヤコブ。

6
David Thomas

これは、 A List Apart の人が記事「 Taming Lists 」で推奨する方法です。

#taglist ul li:after {
    content: ",";
}

#taglist ul li.last:after {
    content: "";
}

これには、リストの最後の項目に「last」のclass属性値のタグを付ける必要があります。

<ul id="taglist">
  <li>Apple</li>
  <li>orange</li>
  <li class="last">banana</li>
</ul>
1
Jamie Dixon

クロスブラウザ互換性のある純粋なCSS方法はありません（Microsoftのおかげです）。サーバー側のロジックでそれを行うことをお勧めします。

おそらく、最後のliでlastクラスを使用し、最後のliを除くすべてのlisで背景画像を使用することで親しくなりますが、IEで：last-childおよびcontent：を実行することはできません。

0
meder omuraliev