フレックスボックスを使ってナビゲーションメニューに擬似を使用する：beforeは2行で分割しています

Question

2つのブレークポイントを持つmedia-queryとflexboxを使用すると、：beforeコンテンツを "|"で分割する前にうまくいきました：

.navigation li+li:before { 
    content: '/ '; 
} 

JsFiddle

どのように私はそれがメニューの残りの部分とインライン滞在することができますか？

Answer 1

あなたは、各li

にdisplay: flexとalign-items: centerを使用することができます

.navigation { 
 
    list-style: none; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-end; 
 
    font-weight: 300; 
 
    font-size: 18px; 
 
} 
 
li { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.navigation a { 
 
    text-decoration: none; 
 
    color: #F05A24; 
 
    padding: 14px 16px; 
 
} 
 
.navigation li+li:before { 
 
    content: '/ '; 
 
}

<ul class="navigation"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Products</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

あなたがliの真ん中にあるように小さな画面上でspace-aroundレイアウトを使用して/を取得したい場合は、この代わりに

.navigation { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    font-weight: 300; 
 
    font-size: 18px; 
 
} 
 
li { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
.navigation a { 
 
    text-decoration: none; 
 
    color: #F05A24; 
 
    padding: 14px 16px; 
 
} 
 
.navigation li:before { 
 
    content: '/ '; 
 
} 
 
.navigation li:first-child:before { 
 
    content: '/ '; 
 
    color: transparent; 
 
}

<ul class="navigation"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Products</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

Answer 2

リンクをblockの要素に設定すると、動作に問題はありません。 リンクからブロックプロパティを削除し、inline-blockにリセットしてverticalpaddingを許可します。

display解除：https://jsfiddle.net/jk37gbpn/3/

display:inline-block;https://jsfiddle.net/jk37gbpn/4/

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: flex-end; 
 
    font-weight: 300; 
 
    font-size: 18px; 
 
} 
 
.navigation a { 
 
    display:inline-block; 
 
    text-decoration: none; 
 
    color: #F05A24; 
 
    padding: 14px 16px; 
 
} 
 
.navigation a:hover { 
 
    font-weight: 400; 
 
    color: black; 
 
} 
 

 
.navigation li+li:before { 
 
    content: '/ '; 
 
} 
 
@media all and (max-width: 820px) { 
 
    .navigation { 
 
    justify-content: space-around; 
 
    } 
 
    .navigation a { 
 
    font-size: 120%; 
 
    } 
 
    #logo { 
 
    display: none; 
 
    } 
 
}

<ul class="navigation"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Products</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
</ul>