Html 无法更改导航栏bootstrap3中的按钮高度

我在导航栏中更改按钮高度时遇到问题。
这是我想要的：
这是我得到的：
我试着玩填充和边缘，但它变得更糟。有人能举例说明如何做我想做的事吗？

下面是我使用的一段代码：

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="icons/logo_footer_42x57.png"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <div class="nav navbar-nav navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Account</a></li>
          <li><a href="#">Deposit</a></li>
          <li><a href="#">Withdrawal</a></li>
        </ul>
        <ul class="nav navbar-nav group" styles="border: 1px solid #479ccf;">
          <li><a href="">Log in</a></li>
          <li class="divider-vertical"></li>
          <li><a href="">Sign up</a></li>
        </ul>            

      </div>
    </div>
  </div>
</nav>

---

这可能不是最好的选择，因为其中一个css规则使用！重要的

我增加了1个css类

user

，用于登录和注册

HTML的变化

<ul class="nav navbar-nav group" styles="border: 1px solid #479ccf;">
   <li><a href="" class="user">Log in</a></li>
   <li class="divider-vertical"></li>
   <li><a href="" class="user">Sign up</a></li>
</ul>

将边距添加到链接组的顶部

ul.nav.navbar-nav.group {
    margin-top: 9px;
}

减少文本填充的新类

.user {
    padding: 5px 15px !important;
}

---

请同时提供CSS。尝试使用文本的行高和垂直对齐来对齐分隔符。

ul.nav.navbar-nav.group {
    margin-top: 9px;
}

.user {
    padding: 5px 15px !important;
}