CSS如何对齐元素

Question

我有一个购物车图标和购物车链接，我想与菜单上的其他链接（注册和登录）对齐，但我对CSS不是很好。有人知道怎么做这个吗？

看我的照片......

代码：

  <ul class="nav navbar-nav navbar-right">
    <li><span><i class="fa fa-shopping-cart">   </i>&nbsp;@{Html.RenderAction("CartSummary", "ShoppingCart");}      </span></li>
    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id =       "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id =       "loginLink" })</li>      

  </ul>

Answer 1

尝试将li项line-height等于导航栏的高度。

ul.nav > li {
   line-height: <your nav height>

我在这里为你做了一个例子：See CodePen

Answer 2

在您的css文件中

，使用属性

padding-top:0px;

链接注册，登录。

Answer 3

尝试将list-style-type:none;添加到<ul>

Fiddle Demo

<强> CSS

ul{
    list-style-type:none;
}