使用導航欄內的浮動

我浮動導航欄右側的2個鏈接，但inputfield上升。它應該像按鈕一樣停留在導航欄的中間。下面是代碼：使用導航欄內的浮動

*{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
body{ 
 
\t background-color: rgb(226, 220, 220); 
 
} 
 

 
nav{ 
 
\t width: 100%; 
 
\t background-color: #2C2C2F; 
 
} 
 

 
nav > .nav_ul{ 
 
\t width: 1000px; 
 
\t margin: 0px auto; 
 
\t font-size: 0px; 
 
} 
 

 
nav > .nav_ul > .nav_li{ 
 
\t display: inline-block; 
 
\t margin: 10px 0px; 
 
\t font-size: 16px; 
 
\t margin-right: 20px; 
 
} 
 

 
nav > .nav_ul > .nav_li_last_child{ 
 
\t margin-right: 0px; 
 
} 
 

 
nav > .nav_ul > .nav_li > .nav_a{ 
 
\t text-decoration: none; 
 
\t padding: 10px 10px; 
 
\t background-color: #E56E04; 
 
\t display: block; 
 
\t color: white; 
 

 
\t border: 1px solid #E56E04; 
 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
} 
 

 
nav > .nav_ul > .nav_search{ 
 
\t position: relative; 
 
\t display: inline-block; 
 
} 
 

 
nav > .nav_ul > .nav_search > .nav_searchfield{ 
 
    width: 300px; 
 
    font-size: 16px; 
 
    \t padding: 10px; 
 
    display: inline-block; 
 
    background-color: #545455; 
 
    color: white; 
 

 
    border: 1px solid black; 
 
    border-right: none; 
 

 
    -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 

 
\t border-bottom-right-radius: 0px; 
 
\t border-top-right-radius: 0px; 
 
} 
 

 
nav > .nav_ul > .nav_search > .fa-search{ 
 
\t font-size: 16px; 
 
\t display: inline-block; 
 
\t padding: 11.5px; 
 
\t background-color: #545455; 
 
\t color: black; 
 

 
\t border: 1px solid black; 
 
    border-left: none; 
 

 
\t -webkit-border-radius: 5px; 
 
\t -moz-border-radius: 5px; 
 
\t border-radius: 5px; 
 
\t 
 
\t border-bottom-left-radius: 0px; 
 
\t border-top-left-radius: 0px; 
 
} 
 

 

 
/* ------------------ */ 
 

 
.float_right{ 
 
\t float: right; 
 
} 
 

 
.float_left{ 
 
\t float: left; 
 
} 
 

 
.clear_both{ 
 
\t clear: both; 
 
}

<!DOCTYPE> 
 
<html> 
 
\t <head> 
 
\t \t <link href="backbone/general.css" rel="stylesheet" type="text/css"/> 
 
\t \t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <nav> 
 
\t \t \t <ul class="nav_ul"> 
 
\t \t \t \t <div class="nav_search"> 
 
\t \t \t \t \t <input class="nav_searchfield" type="text" placeholder="Search ..." /> 
 
\t \t \t \t \t <span class="fa fa-search"></span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <li class="nav_li float_right nav_li_last_child"><a href="#" class="nav_a">Login</a></li> 
 
\t \t \t \t <li class="nav_li float_right"><a href="#" class="nav_a">Register</a></li> 
 

 
\t \t \t \t <div class="clear_both"></div> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t </body> 
 
</html>

我創建了一個div風格clear: both。我把他放在兩個鏈接下。但是這沒有幫助。

來源

2015-06-07 Name

按鈕使用保證金爲中心，與搜索用它爲好，像這樣：

nav > .nav_ul > .nav_search{ 
    margin: 10px 20px 10px 0px; 
}

FIDDLE：https://jsfiddle.net/lmgonzalves/dsr0o7dn/

來源

2015-06-07 14:13:26 lmgonzalves

感謝您的回答！再次...我認爲輸入字段像按鈕一樣居中。 – Name

@Name我很樂意幫助:) – lmgonzalves

嗯，也許我可以問你一個問題。我希望這兩個（按鈕和輸入字段）具有相同的高度。我現在試了很久，但它不正確。也許你有一個想法。 – Name

使用導航欄內的浮動

回答

相關問題