垂直对齐顶部菜单栏中的输入和项目

Question

我的页面顶部有一个名为.top-utility-bar的菜单栏，在此我想要一个搜索框，一个登录链接和购物车状态。

我已经快速完成了这项工作，但我在输入框与菜单上的链接对齐方面存在一些问题，如下所示：

我喜欢它，所以其他项目垂直对齐。

我一直试图让它工作好几天，但仍然没有运气。我做错了什么是显而易见的吗？

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

Answer 1

而不是浮动li，浮动整个ul并使用display:inline-block上的li

注意：原始浮动正在颠倒li的顺序，所以我改变了根据源顺序反映了视觉顺序。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;