html - CSS 边框未绑定(bind)

Question

我正在尝试制作以下菜单栏

事实是我的结果如下:

我的主要问题是我不知道如何让侧边到达层的顶部，我使用的CSS和HTML代码如下:

HTML

<div id="header" class="row">
    <div class="col-md-12">
 <nav>
    <ul class="actions">
      <li class="header_nav">
         <a href="#">Iniciar Sesi&oacute;n</a>
      </li>
     <li class="header_nav notifications">
       <a href="#"></a>
     </li>
    <li class="header_nav like">
       <a href="#"></a>
    </li>
    <li class="header_nav history">
       <a href="#"></a>
    </li>
 </ul>
  </nav>
</div>
</div>

CSS

.actions a:before{ 
content: "";
float: left;
width: 20px;
height: 19px;
margin: 0 5px 0 0;
background: url(../img/menu.png);
}

.history a:hover:before,
.history a:focus:before,
.history a:active:before {
    background-position: 40px -22px;
    }

.history a:before { background-position: 40px 0; }

.notifications a:hover:before,
.notifications a:focus:before,
.notifications a:active:before {
    background-position: 0 -22px;
    }

.notifications a:before { background-position: 0 0; }

.like a:hover:before,
.like a:focus:before,
.like a:active:before {
    background-position: 20px -22px;
    }

.like a:before { background-position: 20px 0; }

#header{
    border-bottom: 1px solid #999;
}

nav{
    padding-top: 10px;
}

nav li{
    list-style: none;
    display: inline;
}

li{
    border-right: 1px solid #999;
}

谢谢你所做的一切!

Answer 1

进行以下更改:

nav li {
list-style: none;
display: inline;
float: left;
padding: 10px;
height: 42x; // for 1px difference to the bottom
}

如果你不想要左边那么空的空间，这个:

.row {
margin-left: -60px;
margin-right: -15px;
}