Pseudo kullanarak gezinme menüsü için flexbox kullanma: önce iki satıra bölünüyor

Question

Ortam aramasını ve 2 break noktalı flexbox'ı kullanmadan önce: "|":

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

JsFiddle

Nasıl menüde geri kalanı ile in-line kalmak yapabilirsiniz?

Answer 1

Her li

üzerinde display: flex ve align-items: center kullanabilirsiniz Eğer li ortasında olmak üzere / küçük ekranlarında space-around düzenini kullanabilir ve almak istiyorsanız

.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>

Eğer bu yerine

.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

Bağlantıları block öğeleri olarak ayarlarsınız, bu nedenle davranışta yanlış bir şey yoktur. Blok propertisini bağlantılardan kaldırın ve vertical izin vermek için inline-block olarak sıfırlayın.

display unset: 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>