将输入对齐到列表元素

Question

我想按照以下顺序排列我的清单

问题是input框卡在“高”位置。

这是我的代码。

 #menu { float: right; width: 700px; margin: 0 auto; padding: 0; } #menu ul { float: right; margin: 0; padding: 10px 0px 0px 0px; list-style: none; line-height: normal; } #menu li { float: left; padding: 0px 0px 0px 0px; } #menu a { display: block; margin-right: 1px; padding: 10px 20px 10px 20px; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 300; color: #585858; border: none; } #menu .current_page_item a { text-decoration: none; color: #FFFFFF; } #menu .current_page_item a { background: #2AA8D2; border-radius: 5px; } 

  <div id="menu"> <ul style = "display:block"> <li><input type="text" placeholder = "Search"/>&nbsp&nbsp<span class="glyphicon glyphicon-search"></span></li> <li><a href="#">Portals</a></li> <li><a href="#">About</a></li> <li><a href="#">Language</a></li> <li><a href="#">Log In</a></li> </ul> </div> 

Answer 1

使用display:inline-block和vertical-align:middle li vertical-align:middle

 #menu { float: right; width: 700px; margin: 0 auto; padding: 0; border-bottom: 5px red solid } #menu ul { float: right; margin: 0; padding: 10px 0px 0px 0px; list-style: none; line-height: normal; display:block } #menu li { display:inline-block; vertical-align:middle; padding: 0; } #menu a { display: block; margin-right: 1px; padding: 10px 20px 10px 20px; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 300; color: #585858; border: none; } #menu .current_page_item a { text-decoration: none; color: #FFFFFF; } #menu .current_page_item a { background: #2AA8D2; border-radius: 5px; } 

 <div id="menu"> <ul> <li> <input type="text" placeholder="Search" />&nbsp&nbsp<span class="glyphicon glyphicon-search"></span> </li> <li><a href="#">Portals</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Language</a> </li> <li><a href="#">Log In</a> </li> </ul> </div>