html - Vertically aligning an input and an item in a top menu bar -

i've got menu bar @ top of page called .top-utility-bar , in i'd have search box, sign in link , cart status.

i've made i'm having issues aligning input box links on menu so:

i'd other items align vertically.

i've been trying working days still no luck. doing wrong that's obvious?

html:

<div class="top-utility-bar">   <div class="right-top">     <ul class="top-list">       <li class="top-li">         hello <a href="/account">{{ customer.first_name }}</a>! {{ 'log out' | customer_logout_link }}     </li>     <li class="top-li">       <a href="/cart"><i class="fa fa-shopping-cart icon"></i> {{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }} ({{ cart.total_price | money }})</a>     </li>     <li class="top-li">         <form action="/search" method="get" class="search-form" role="search">         <input name="q" type="search" id="search-field" placeholder="&#xf002; search" value="{{ search.terms | escape }}" />       </form>     </li>   </ul> </div>   

css:

.top-utility-bar input, .top-utility-bar a, .top-utility-bar i, .top-utility-bar {   color: {{ settings.utility_bar_text_color }};   background-color: {{ settings.utility_bar_color }}; }  .top-utility-bar:after {   content: ".";   display: block;   height: 0;   clear: both;   visibility: hidden; }  .top-list {   margin: 0;   list-style: none outside none; }  .top-li {   margin: 10px 0 0 30px;   float: right; } 

rather floating li, float whole ul , use display:inline-block on li

note: original float reversing order of li have changed reflect visual order according source order.

.top-utility-bar input,  .top-utility-bar a,  .top-utility-bar i,  .top-utility-bar {    color: {      {        settings.utility_bar_text_color      }    }    ;    background-color: {      {        settings.utility_bar_color      }    }    ;  }  .top-utility-bar:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;  }  .top-list {    margin: 0;    list-style: none outside none;    float: right;  }  .top-li {    margin: 10px 0 0 30px;    display: inline-block;    vertical-align: middle;  }

<div class="top-utility-bar">    <div class="right-top">      <ul class="top-list">        <li class="top-li">          <form action="/search" method="get" class="search-form" role="search">            <input name="q" type="search" id="search-field" placeholder="&#xf002; search" value="alue" />          </form>        </li>        <li class="top-li"><a>item count</a>        </li>        <li class="top-li">          hello <a href="/account">first name</a>        </li>          </ul>