html - 更改 Bootstrap 导航链接填充而不会弄乱对齐

Question

我需要更改导航链接的填充以使最后一个链接的背景变小，但是，当我这样做时它会弄乱链接对齐方式并且它们不再在导航中垂直居中。是什么原因造成的，我该如何解决？

HTML

<nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <img src="img/logo.png" class="navbar-brand" href="index.html">
            </div>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="nav navbar-nav navbar-left">
                <li><span class="fa fa-phone"> +62 202 555 0117</span></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#" class="nav-button">Get started</a></li>
              </ul>
            </div>
          </div>
        </nav>

CSS

.container {
    width: 1056px;
}
nav.navbar {
    padding: 12px;
    border-radius: 0;
    background: url("../img/nav-bg.png");
}
nav.navbar li {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
nav.navbar li a {
    padding: 6px 20px;
}
nav.navbar li a:link {
    color: #9faeaf;
}
nav.navbar li a.active:link {
    color: #fff;
}
.nav-button {
    background: #6a7f7f;
}
nav.navbar a.nav-button:link {
    color: #fff;
}
nav.navbar a.nav-button:hover {
    background: #fff;
    color: #366a6b;
}

Answer 1

修复它:

nav.navbar li a {
     padding: 8px 20px; 
     margin-top: 0.5em;
}