引导3-使导航条的链接垂直增长与品牌形象的大小

Question

如果我从问题的截图开始，然后描述我想要发生的事情，这可能是最简单的。这是我现在的肚脐：

​

​

如您所见，右边的链接将其文本放置在顶部。而且，这就是我创建的悬停效果当前所做的工作：

​

​

我想做两件事：

1. 将导航条的<li>元素的高度设置为导航条本身的全部高度。换句话说，使其使悬停效果改变链接的整个高度的导航条的背景颜色，而不是它现在创建的小框。
2. 将链接文本居中。

我不知道从哪里开始，因为我的CSS技能很弱，导航栏的东西被放在几个不同的CSS类中。

我的导航条形码目前是：

<nav id="k9nav-outer" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#k9nav-inner">
                <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="images/k9logo.png" alt="K9SportsCenter" class="img-responsive" /></a>
        </div>

        <div class="collapse navbar-collapse" id="k9nav-inner">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Services</a></li>
                <li><a href="#">Plans</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

我当前的自定义CSS是：

#k9nav-outer {
    background-color: #428bca;
}

#k9nav-inner ul li:hover {
    background-color: black;
}

#k9nav-inner ul li:hover a {
    box-shadow: 0 -2px red inset;
}

#k9nav-inner ol li:active {
    background-color: black;
}

#k9nav-outer .navbar-brand,
#k9nav-inner .navbar-nav > li > a {
    color: #fff;
}

其余的CSS是标准的引导3项目，当你点击‘下载’在他们的网站。

使用Chrome的开发工具，我看到<li>元素的高度为50 of。必须生成该值，因为我没有为它们指定任何特定的高度。我应该这么做吗？

.navbar li {
    height: 100%;
}

让他们和品牌形象一起调整尺寸？

Answer 1

您可以将导航条链接的line-height更改为图像的高度。

.navbar-nav > li > a {
    line-height:100px;
}

使用图像的自定义导航条示例：http://bootply.com/108341