Align Eingabe in Listenelement

Question

Ich mag würde meine Liste auszurichten, wie

folgen Das Problem ist die input Box in "high" Position stecken.

Hier ist mein Code.

#menu { 
 
\t float: right; 
 
\t width: 700px; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
#menu ul { 
 
\t float: right; 
 
\t margin: 0; 
 
\t padding: 10px 0px 0px 0px; 
 
\t list-style: none; 
 
\t line-height: normal; 
 
} 
 

 
#menu li { 
 
\t float: left; 
 
\t padding: 0px 0px 0px 0px; 
 
} 
 

 
#menu a { 
 
\t display: block; 
 
\t margin-right: 1px; 
 
\t padding: 10px 20px 10px 20px; 
 
\t text-decoration: none; 
 
\t text-align: center; 
 
\t text-transform: uppercase; 
 
\t font-family: 'Montserrat', sans-serif; 
 
\t font-size: 13px; 
 
\t font-weight: 300; 
 
\t color: #585858; 
 
\t border: none; 
 
} 
 

 
#menu .current_page_item a { 
 
\t text-decoration: none; 
 
\t color: #FFFFFF; 
 
} 
 

 
#menu .current_page_item a { 
 
\t background: #2AA8D2; 
 
\t border-radius: 5px; 
 
}

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

Answer 1

Verwendung display:inline-block und vertical-align:middle in li

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