web-dev-qa-db-ja.com

LI要素のテキスト区切り文字

Li要素の間にスラッシュ（ '/'）を追加したいのですが、意味論的にそれを行う最良の方法がわかりません。今、私は単にliタグにスラッシュを含め、次のように改行しないスペースでスペースを追加しています：

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

どう思いますか？ありがとう。

csshtml-lists
33
Frank

疑似要素を使用して要素の後にテキストを含めることができ、CSS3セレクターを使用して最後の要素から末尾のスラッシュを削除できます。

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

編集：

より良いCSS3を使用して、すべてを1行で実行できます。

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

編集：編集：

それよりもさらに簡単です。

#footer_menu li + li:before {
    content: "/";
}
78
Kyle Sletten

これは|で区切られたLI要素に対する私のソリューションです。 （パイプ）：

li + li:before {
    content: " | ";
}

この場合、隣接コンビネータ（プラス記号、+）が非常に便利です。指定された別の要素が直接先行している場合、要素のスタイルを設定できます。最初のliの前に別のliがないため、コンテンツの先頭に追加されません。これは、以下よりもはるかに少ない入力です。

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}
24
klassmann

Sass を使用している場合、この目的で mixin を記述しました。

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

例：

@include addSeparator('li', '|', 1em);

これはあなたにこれを与えます：

li+li:before {
  content: "|";
  padding: 0 1em;
}
1
d4nyll

Liコンテンツをスパンに入れてから、CSSを使用できます。

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

または似たようなもの。

編集カイルが言ったようにああ、しかしlast_childルールの追加はより完全です。

1
Ian Devlin

カスタマーサポート/配送情報/サイズチャート/プライバシーポリシー/連絡先のようなことをしようとしている場合は、CSSでそれを行うことができます

次のように、セットの最初のliに「最初の」クラスを追加する必要があります。

<ul id="footer_menu">
    <li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

そして、次のCSS

 #footer_menu ul {  
    float: left; 
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li {
    border-left: 2px solid #000000;
    float: left;
    padding: 0 10px;
}

#footer_menu li.first {
    border: none;
}

これにより、すべてのli要素が隣り合わせに配置され、境界線が表示されます。結果は次のようになります

カスタマーサポート|配送情報|サイズチャート|プライバシーポリシー|連絡先

0
tomoguisuru