html - Bootstrap 3 - 使导航栏的链接随着品牌形象的大小垂直增长

Question

如果我从问题的屏幕截图开始，然后描述我想要发生的情况，这可能是最简单的。所以，这是我当前的导航栏:

如您所见，右侧链接的文本位于顶部。而且，这就是我创建的悬停效果当前正在执行的操作:

我想做两件事:

1. 设置 <li> 的高度导航栏中的元素 <ul>是导航栏本身的完整高度。换句话说，使悬停效果改变导航栏整个高度的链接背景颜色，而不是它现在创建的小框。
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;
}

当您在网站上单击“下载”时，标准 Bootstrap 3 元素会附带 CSS 的其余部分。

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

.navbar li {
    height: 100%;
}

让它们随着品牌形象一起调整大小？

Answer 1

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

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

带有图像的自定义导航栏示例:http://bootply.com/108341