web-dev-qa-db-ja.com

水平ULメニューの垂直分割線

水平ナビゲーションバー（ドロップダウンなし、水平リストのみ）を作成しようとしていますが、メニュー項目間に垂直の仕切りを追加する最適な方法を見つけるのに問題があります。

実際のHTMLは次のとおりです。

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

現在のCSSは次のとおりです。

.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}

各メニュー項目の間に、最初の項目の前にディバイダーを表示したくない、および2番目の項目の後にディバイダーを表示したくない場合を除いて、垂直ディバイダーとして小さな画像が必要です。

最終結果は次のようになります。

アイテム1 |アイテム2 |アイテム3 |アイテム4 |アイテム5

パイプを実際の画像に置き換えるだけです。

さまざまな方法を試しました-list-style-imageプロパティですが、画像は表示されませんでした。また、仕切りを背景として設定しようとしましたが、実際には多かれ少なかれ機能しましたが、最初のアイテムの前に仕切りがありました。

htmlcssmarkup
64
Michael L

「最初の要素を指定する必要」がなく、非常にシンプルです。 CSSは、ほとんどの人が考えるよりも強力です（例：first-child:before 素晴らしいです！）。しかし、これは、少なくとも私の意見では、これを行う最も断然かつ最も適切な方法です。

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

HTMLで単純な順序なしリストを使用するだけで、自動的にリストが作成されます。 HTMLは次のようになります。

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

結果は次のようになります。

ホーム|私たちについて|サポート

これで、無制限に拡張でき、順序、リンクの変更、または最初のエントリについて心配する必要がなくなります。すべて自動化されており、うまく機能します！

106
David Cahill

これを試してください、シーカー：

li+li { border-left: 1px solid #000000 }

これは、隣接するli要素のみに影響します

見つかった ここ

26
vladkras

これは、CSS：pseudo-classesでも実行できます。サポートの幅はそれほど広くなく、上記の答えでも同じ結果が得られますが、純粋なCSS-y =）です。

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

または：

.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }

参照： http://www.quirksmode.org/css/firstchild.html
または： http://www.w3schools.com/cssref/sel_firstchild.asp

12
Campbeln

あなたのベストショットは、最初の1つを除くlisのそれぞれに割り当てられたborder-leftプロパティだと思います（最初のものにfirstという名前のクラスを与え、明示的に削除する必要がありますその境界線）。

プログラムで<li>を生成している場合でも、firstクラスを割り当てるのは簡単です。

3
Pekka 웃

より簡単な解決策は、#navigation ul li~li { border-left: 1px solid #857D7A; }を追加するだけです

2
newbie
.last { border-right: none

.last { border-right: none !important; }
1
Scott

これは私にとってはうまくいきます：

NB私は使用しています BEM/OCSS SCSS構文

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}
0
Satu