Ne peut pas faire Nav Horizontal

Question

Je travaille sur cela depuis des lustres et j'essaie tout sous le soleil pour essayer de comprendre comment faire de cette barre de navigation horizontale je l'ai déjà fait parce que je l'ai copié et collé depuis un ancien site web J'ai fait mais ça ne semble pas fonctionner. Qu'est-ce que je fais mal? J'ai fait flotter vers l'affichage gauche en ligne tout ça. Est-il possible que j'ai quelque chose qui pourrait l'emporter? PS. Je travaille dans Dreamweaver et j'utilise certains codages bootstrap si cela peut vous aider.

<nav class="navbar" role="navigation"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">home</a></li> 
     <li><a href="#">menu</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">webshop</a></li> 
    </ul> 
</nav> 

/Nav Mise en forme/

.navbar-nav { 
    width: 20%; 
text-align: center; 
} 

.navbar-nav > li { 
    float: right; 
    display: inline-block; 
} 
.navbar-nav .nav > lu { 
    float: right; 
    display: inline; 
} 

/Nav Mise en forme: hover animation/

.navbar-nav li { 
    position: relative; 
    float: left; 
    margin: 0 20px; 
} 

.navbar-nav li:before { 
    content: ''; 
    display: inline; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 2px; 
    height: 0; 
    background-color: #ABE1DB; 
    -webkit-transition: height 0.4s ease 0.4s; 
    transition: height 0.4s ease 0.4s; 
} 

.navbar-nav li:after { 
    content: ''; 
    display: inline; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 2px; 
    height: 0; 
    background-color: #ABE1DB; 
    -webkit-transition: height 0.4s ease 0.4s; 
    transition: height 0.4s ease 0.4s; 
} 

.navbar-nav li:hover:before, li:hover:after { 
    height: 100%; 
} 

.navbar-nav li:hover a { 
    background-color: transparent; 
    -webkit-transition: background-color 0.4s ease 0.4s; 
    transition: background-color 0.4s ease 0.4s; 
} 

.navbar-nav li:hover a:before, li:hover a:after { 
    width: 100%; 
} 

.navbar-nav a { 
    display: inline; 
    padding: 0 40px; 
    height: 100%; 
    font-weight:normal; 
    font-size: 18px; 
    line-height: 60px; 
    color: #ABE1DB; 
    text-decoration: none; 
    -webkit-transition: background-color 0.4s ease; 
    transition: background-color 0.4s ease; 
} 
.navbar-nav a:before { 
    content: ''; 
    display: inline; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background-color: #ABE1DB; 
    -webkit-transition: width 0.4s ease; 
    transition: width 0.4s ease; 
} 

.navbar-nav a:after { 
    content: ''; 
    display: inline; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 2px; 
    background-color: #ABE1DB; 
    -webkit-transition: width 0.4s ease; 
    transition: width 0.4s ease; 
} 

Answer 1

Vous avez défini

.navbar-nav{ 
    width: 20%; 
} 

Comment peut-il se développer? Essayez

.navbar-nav { 
    width: 100%; 
} 

/*Nav Formatting*/ 
 

 
.navbar-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.navbar-nav>li { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 

 
.navbar-nav .nav>lu { 
 
    float: right; 
 
    display: inline; 
 
} 
 

 

 
/*Nav Formatting: Hover animation*/ 
 

 
.navbar-nav li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0 20px; 
 
} 
 

 
.navbar-nav li:before { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 0; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: height 0.4s ease 0.4s; 
 
    transition: height 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:after { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 2px; 
 
    height: 0; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: height 0.4s ease 0.4s; 
 
    transition: height 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:hover:before, 
 
li:hover:after { 
 
    height: 100%; 
 
} 
 

 
.navbar-nav li:hover a { 
 
    background-color: transparent; 
 
    -webkit-transition: background-color 0.4s ease 0.4s; 
 
    transition: background-color 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:hover a:before, 
 
li:hover a:after { 
 
    width: 100%; 
 
} 
 

 
.navbar-nav a { 
 
    display: inline; 
 
    padding: 0 40px; 
 
    height: 100%; 
 
    font-weight: normal; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
    color: #ABE1DB; 
 
    text-decoration: none; 
 
    -webkit-transition: background-color 0.4s ease; 
 
    transition: background-color 0.4s ease; 
 
} 
 

 
.navbar-nav a:before { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 2px; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: width 0.4s ease; 
 
    transition: width 0.4s ease; 
 
} 
 

 
.navbar-nav a:after { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 2px; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: width 0.4s ease; 
 
    transition: width 0.4s ease; 
 
}

<!--- Navbar ---> 
 

 
<nav class="navbar" role="navigation"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">menu</a></li> 
 
    <li><a href="#">about</a></li> 
 
    <li><a href="#">webshop</a></li> 
 
    </ul> 
 
</nav>

Answer 2

Votre ul est petite. C'est pourquoi il va l'appuyer ensemble. Essayez

ul.nav.navbar-nav { 
    width:100%; 
} 

Answer 3

1. Le récipient extérieur .navbar-nav a été dessiné avec une largeur de 20%. Cela a forcé les éléments intérieurs à envelopper parce qu'il n'y avait pas assez d'espace. Une largeur de 100% n'est pas nécessaire ici car <nav> est un élément de bloc.

2. Si vous n'avez que 4 quatre éléments internes, vous pouvez leur donner un width of 25% combiné avec floating left pour les empiler les uns à côté des autres.

3. Ajouter un clearfix class ou overflow:hidden (rapide et sale!) Au conteneur externe pour s'assurer qu'il enveloppe visuellement les éléments internes.

4. S'il vous plaît voir mon extrait de code mis à jour pour la référence:

/*Nav Formatting*/ 
 

 
.navbar-nav { 
 
} 
 

 
.navbar-nav li { 
 
    width: 25%; 
 
    float: left; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.navbar-nav .nav > ul { 
 
    float: right; 
 
    display: inline; 
 
    margin: 0; 
 
} 
 

 

 
/*Nav Formatting: Hover animation*/ 
 

 
.navbar-nav li { 
 
    position: relative; 
 
} 
 

 
.navbar-nav li:before { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 0; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: height 0.4s ease 0.4s; 
 
    transition: height 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:after { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 2px; 
 
    height: 0; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: height 0.4s ease 0.4s; 
 
    transition: height 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:hover:before, 
 
li:hover:after { 
 
    height: 100%; 
 
} 
 

 
.navbar-nav li:hover a { 
 
    background-color: transparent; 
 
    -webkit-transition: background-color 0.4s ease 0.4s; 
 
    transition: background-color 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:hover a:before, 
 
li:hover a:after { 
 
    width: 100%; 
 
} 
 

 
.navbar-nav a { 
 
    display: inline; 
 
    padding: 0 40px; 
 
    height: 100%; 
 
    font-weight: normal; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
    color: #ABE1DB; 
 
    text-decoration: none; 
 
    -webkit-transition: background-color 0.4s ease; 
 
    transition: background-color 0.4s ease; 
 
} 
 

 
.navbar-nav a:before { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 2px; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: width 0.4s ease; 
 
    transition: width 0.4s ease; 
 
} 
 

 
.navbar-nav a:after { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 2px; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: width 0.4s ease; 
 
    transition: width 0.4s ease; 
 
}

<!--- Navbar ---> 
 

 
<nav class="navbar" role="navigation"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">menu</a></li> 
 
    <li><a href="#">about</a></li> 
 
    <li><a href="#">webshop</a></li> 
 
    </ul> 
 
</nav>

Answer 4

/*Nav Formatting*/ 
 

 
.navbar-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.navbar-nav >li { 
 
    float: right; 
 
} 
 

 
.navbar-nav .nav > ul { 
 
    float: right; 
 
} 
 

 

 
/*Nav Formatting: Hover animation*/ 
 

 
.navbar-nav li { 
 
    position: relative; 
 
    margin: 0 20px; 
 
} 
 

 
.navbar-nav li:before { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 2px; 
 
    height: 0; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: height 0.4s ease 0.4s; 
 
    transition: height 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:after { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 2px; 
 
    height: 0; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: height 0.4s ease 0.4s; 
 
    transition: height 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:hover:before, 
 
li:hover:after { 
 
    height: 100%; 
 
} 
 

 
.navbar-nav li:hover a { 
 
    background-color: transparent; 
 
    -webkit-transition: background-color 0.4s ease 0.4s; 
 
    transition: background-color 0.4s ease 0.4s; 
 
} 
 

 
.navbar-nav li:hover a:before, 
 
li:hover a:after { 
 
    width: 100%; 
 
} 
 

 
.navbar-nav a { 
 
    display: inline; 
 
    padding: 0 40px; 
 
    height: 100%; 
 
    font-weight: normal; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
    color: #ABE1DB; 
 
    text-decoration: none; 
 
    -webkit-transition: background-color 0.4s ease; 
 
    transition: background-color 0.4s ease; 
 
} 
 

 
.navbar-nav a:before { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 2px; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: width 0.4s ease; 
 
    transition: width 0.4s ease; 
 
} 
 

 
.navbar-nav a:after { 
 
    content: ''; 
 
    display: inline; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 2px; 
 
    background-color: #ABE1DB; 
 
    -webkit-transition: width 0.4s ease; 
 
    transition: width 0.4s ease; 
 
}

<!--- Navbar ---> 
 

 
<nav class="navbar" role="navigation"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">menu</a></li> 
 
    <li><a href="#">about</a></li> 
 
    <li><a href="#">webshop</a></li> 
 
    </ul> 
 
</nav>