html - 强制 <li> 具有其父级 <ul> 的高度

Question

所以我试图在 css 中制作一个导航栏，但是当我将 <a> 的字体大小变大时，所有其他的都变得困惑并且没有垂直居中。我使用了 inspect element 并看到带有 navbar-right 类的 <a> 标签与它们的 <ul> 父级的高度不同，因此没有居中。

代码笔:http://codepen.io/anon/pen/aBWgJq

有没有不用 bootstrap/javascript 的解决方案？`

HTML:

    <ul class="nav" role="navigation">
       <li class="nav-left"><a href="#" class="brand"><span class="ot">T</span>est</a></li>
        <li class="nav-right"><a href="#" id="one" role="button">123</a></li>
        <li class="nav-right"><a href="#" id="two" role="link">456</a></li>
        <li class="nav-right"><a href="#" id="three" role="link">789</a></li>
    </ul>

CSS:

.nav
{
    list-style-type: none;
    overflow: hidden;
    background-color: rgb(238, 238, 238);
}

.nav li a
{
    display: block;
    padding: 16px;
}

.nav .nav-left
{
    float: left;
    font-size: 35px;
}

.nav .nav-right
{
    float: right;
    text-transform: uppercase;
    font-size 20px;
}

.ot
{
    color: rgb(255, 165, 0);
}

Answer 1

如果你想要所有<a>的字体相同里面<li>

这样改变字体大小

.nav li a
{
    display: block;
    padding: 16px;
  font-size: 35px;
}

根据您的代码进行解释