flexbox navigation w/logo float & border-bottom issue

Im пытается выяснить, как добавить логотип в мою навигацию по flexbox. Я хочу, чтобы логотип плавал слева. Также пытаемся использовать нижнюю границу границы в состоянии наведения на соединение, но, похоже, она нажимает высоту бара, а также имеет весь li с рамкой вместо текста. любая помощь pls!flexbox navigation w/logo float & border-bottom issue

#nav { 
 
    border-bottom: 5px solid #BF2B36; 
 
} 
 
.navigation { 
 
    list-style: none; 
 
    margin: 0; 
 
    background: #333333; 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: flex-end; 
 
    z-index: 2000; 
 
    font-family: 'BabasNeueBold'; 
 
    font-size:24px; 
 
    letter-spacing:2px; 
 
    line-height:80px; 
 
} 
 

 
.logo { 
 
    background:red; 
 
\t width:200px; 
 
    height:50px; 
 
\t padding-top:10px; 
 
    float:left; 
 
} 
 

 
.navigation a, .navigation a:active, .navigation a:visited { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding:0px 15px 0px 15px; 
 
    color: #FFF; 
 
    letter-spacing:2px; 
 
} 
 

 
.navigation a:hover { 
 
\t color: #BF2B36; 
 
    border-bottom:2px solid #BF2B36; 
 
} 
 

 

 
@media all and (max-width: 800px) { 
 
    .navigation { 
 
    justify-content: space-around; 
 
    } 
 
} 
 

 
@media all and (max-width: 600px) { 
 
    .navigation { 
 
    -webkit-flex-flow: column wrap; 
 
    flex-flow: column wrap; 
 
    padding: 0; 
 
    } 
 
    
 
    .navigation a { 
 
    text-align: center; 
 
    padding: 10px; 
 
    border-top: 1px solid rgba(255,255,255,0.3); 
 
    } 
 
    
 
    .navigation a:hover { 
 
\t color: #BF2B36; 
 
    border-bottom:2px solid #BF2B36; 
 
} 
 

 
    
 
}

<div id="nav"> 
 
<ul class="navigation"> 
 
    <li><div class="logo"></div></li> 
 
    <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> 
 
</div>

источник

2015-02-21 Rabbid

У меня нет ответа на позицию логотипа просто еще, но проблема высоты, потому что вы добавляете границу 2px только при наведении курсора мыши. Вы можете избежать этого, добавив «border: 2px solid transparent» в 'a' в неподвижном (по умолчанию) состоянии. Вы также можете использовать вставка 'box-shadow' вместо границы для достижения такого же эффекта. – Harry

Есть ли какая-то конкретная причина, по которой вы используете 'flex-end' для выравнивания содержимого? Это приводит к тому, что элементы сортируются правильно и, похоже, поэтому логотип не выравнивается влево. – Harry

Вы просто добавить пограничную-дно: 2px твердый прозрачный; для навигации а ...

#nav { 
 
    border-bottom: 5px solid #BF2B36; 
 
} 
 
.navigation { 
 
    list-style: none; 
 
    margin: 0; 
 
    background: #333333; 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: flex-end; 
 
    z-index: 2000; 
 
    font-family: 'BabasNeueBold'; 
 
    font-size:24px; 
 
    letter-spacing:2px; 
 
    line-height:80px; 
 
} 
 

 
.logo { 
 
    background:red; 
 
\t width:200px; 
 
    height:50px; 
 
\t padding-top:10px; 
 
    float:left; 
 
} 
 

 
.navigation a, .navigation a:active, .navigation a:visited { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding:0px 15px 0px 15px; 
 
    color: #FFF; 
 
    letter-spacing:2px; 
 
border-bottom:2px solid transparent; 
 
} 
 

 
.navigation a:hover { 
 
\t color: #BF2B36; 
 
    border-bottom:2px solid #BF2B36; 
 
} 
 

 

 
@media all and (max-width: 800px) { 
 
    .navigation { 
 
    justify-content: space-around; 
 
    } 
 
} 
 

 
@media all and (max-width: 600px) { 
 
    .navigation { 
 
    -webkit-flex-flow: column wrap; 
 
    flex-flow: column wrap; 
 
    padding: 0; 
 
    } 
 
    
 
    .navigation a { 
 
    text-align: center; 
 
    padding: 10px; 
 
    border-top: 1px solid rgba(255,255,255,0.3); 
 
    } 
 
    
 
    .navigation a:hover { 
 
\t color: #BF2B36; 
 
    border-bottom:2px solid #BF2B36; 
 
} 
 

 
    
 
}

<div id="nav"> 
 
<ul class="navigation"> 
 
    <li><div class="logo"></div></li> 
 
    <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> 
 
</div>

источник

2015-02-21 11:46:20 Logz

flexbox navigation w/logo float & border-bottom issue

ответ

Смежные вопросы