kann nicht ewig auf dieser Arbeit und ich versuche, alles unter der Sonne macht Nav Horizontal

Question

Ich habe, um herauszufinden, um zu versuchen, wie diese navbar zu machen horizontal Ich habe es vorher getan, weil ich das von einer alten Website kopiert und eingefügt Ich habe es getan, aber es scheint nicht zu funktionieren. Was mache ich falsch? Ich habe es geschafft, das ganze Zeug auf dem linken Display zu schweben. Ist es möglich, dass ich etwas habe, das es übersteuern könnte? PS. Ich arbeite in Dreamweaver und verwende einige Bootstrap-Codierungen, wenn das hilft.

<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 Formatierung/

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

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

/Nav Formatierung: Bewegen Sie die Maus 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

Sie eingestellt haben

.navbar-nav{ 
    width: 20%; 
} 

Wie kann es erweitern? Versuchen

.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

Ihre ul ist zu klein. Deshalb wird es zusammen drücken. Versuchen

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

Answer 3

1. Der Außenbehälter .navbar-nav mit 20% Breite gestylt wurde. Dies zwang die inneren Elemente zum Umwickeln, weil nicht genug Platz war. Eine Breite von 100% wird hier nicht benötigt, da <nav> ein Blockelement ist.

2. Wenn Sie nur 4 vier innere Elemente haben, können Sie ihnen width of 25% kombiniert mit floating left geben, um sie nebeneinander zu stapeln.

3. hinzufügen clearfix class oder overflow:hidden (quick and dirty!) An den äußeren Behälter wickelt es visally die inneren Elemente, um sicherzustellen.

4. Bitte meine aktualisierten Code-Schnipsel Referenz siehe:

/*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>