如何将高度100%放在导航栏的链接上？

Question

我正在使用twitter-bootstrap,我有以下代码在下拉列表中生成带有头像的导航栏:

检查这个小提琴:http://jsfiddle.net/X4drb/embedded/result/

HTML

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  <i class="fa fa-bars"></i>

            </button> <a class="navbar-brand" href="index.html"><img src="http://placehold.it/30x30&text=logo" ></a>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Hello</a>
                </li>
                <li><a href="#">Stack</a>
                </li>
                <li><a href="#">Overflow</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img id="avatar" class="img-circle mr1" src="http://placehold.it/30x30&text=photo" > John Doe <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#" data-pageindex="3">Settings</a>
                        </li>
                        <li><a href="#">Logout</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS

.caret {
    margin-left: 5px;
}

#avatar, .navbar-brand {
    margin-right: 5px
}

.navbar-nav {
    height: 100%;
    margin: 0;
    padding 0;
}

但是,如您所见,Hello,Stack和Overflow链接列表未到达导航栏的末尾:

你有什么想法来解决它吗？我尝试将height: 100%; padding: 0; margin: 0链接的列表项目放入,但没有任何变化.

Answer 1

尝试行高？

ul.nav.navbar-nav li a:link {
    line-height: 32px; 
}

http://jsfiddle.net/X4drb/9/