Flexbox: letzter nav list item bewegt sich in eine neue Zeile

Question

Ich versuche eine Navbar zu erstellen, die in derselben Zeile steht. Ich habe versucht, flex-direction: row. um alle Listenelemente inline zu machen, aber es hat nicht funktioniert. Irgendwelche Ideen?

@media (min-width: 900px) { 
 
    .main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    } 
 
    .logo-name { 
 
    margin-left: 1%; 
 
    } 
 
    .main-nav { 
 
    display: flex; 
 
    background-color: orange; 
 
    } 
 
    .main-nav li { 
 
    padding: 0.3em; 
 
    align-items: flex-end; 
 
    } 
 
}

<header class="main-header"> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <nav class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <li><a href="#">FREE QUOTE</a></li> 
 
    </nav> 
 
</header>

Answer 1

können Sie flex-wrap: no-wrap; verwenden, wenn das Menü nicht in zwei Zeilen kommen sollte.

.main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.logo-name { 
 
    margin-left: 1%; 
 
} 
 

 
.main-nav { 
 
    background-color: orange; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: no-wrap; 
 
} 
 

 
.main-nav li { 
 
    padding: 0.3em; 
 
    list-style-type: none; 
 
}

<header class="main-header"> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <nav class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <li><a href="#">FREE QUOTE</a></li> 
 
    </nav> 
 
</header>

Answer 2

Das Problem bei @media (min-width: 900px) liegt, nur Ihre CSS-Code außerhalb @media (min-width: 900px) Block bewegen dann funktioniert alles. Ein kleines Problem ist, Sie li Tag innerhalb nav Tag definiert haben, die semantisch falsch, ungültig Markup ist, sollten Sie nav mit ul Tag

@media (min-width: 100px) { 
 
    
 
} 
 
.main-header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    } 
 
    .logo-name { 
 
    margin-left: 1%; 
 
    } 
 
    .main-nav { 
 
    display: flex; 
 
    list-style-type: none; 
 
    background-color: orange; 
 
    } 
 
    .main-nav li { 
 
    padding: 0.3em; 
 
    align-items: flex-end; 
 
    }

<header class="main-header"> 
 
    <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1> 
 

 
    <ul class="main-nav"> 
 
    <li class="nav-item-1"><a href="#">home</a></li> 
 
    <li><a href="#">services</a></li> 
 
    <li><a href="#">gallery</a></li> 
 
    <li><a href="#">about us</a></li> 
 
    <li><a href="#">contact</a></li> 
 
    <li><a href="#">FREE QUOTE</a></li> 
 
    </ul> 
 
</header>