不能使導航水平

Question

我一直在努力工作了很長時間，我正在嘗試一切在陽光下試圖弄清楚如何使這個導航欄水平我之前做過，因爲我從舊網站複製並粘貼我做了，但似乎並沒有工作。我究竟做錯了什麼？我完成浮動到左側顯示內聯所有的東西。我有可能壓倒它的東西嗎？ PS。我正在Dreamweaver中工作，並使用一些引導編碼（如果有幫助的話）。

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

/導航格式化/

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

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

/導航格式：將鼠標懸停動畫/

.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

您已設置

.navbar-nav{ 
    width: 20%; 
} 

它如何擴展？嘗試

.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

你ul是小。這就是爲什麼它會將它壓在一起。嘗試

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

Answer 3

1. 外容器.navbar-nav用20％的寬度樣式。這迫使內部元素包裹，因爲沒有足夠的空間。這裏不需要100％的寬度，因爲<nav>是塊元素。

2. 如果你只有4個四個內部元素，你可以給他們一個​​結合floating left堆疊它們彼此相鄰。

3. 將clearfix class或overflow:hidden（快速和骯髒的！）添加到外部容器，以確保其可以直觀地包裹內部元素。

4. 請參閱我更新的代碼片段供參考：

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