Force <li> to have the height its parent <ul>

Question

So I am trying to make a navbar in css but when I make an <a> 's font size bigger, all the other ones get messed up and not vertically centered. I used inspect element and saw that the <a> tags with the class of navbar-right do not have the same height as the <ul> parent of them, thus not centered.

codepen: http://codepen.io/anon/pen/aBWgJq

any solutions without having to use 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

if you want same font for all <a> inside <li>

change font size this way

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

explanation as per your code

Answer 2

Your nav-right elements don't have the same height as your nav-left elements because they just aren't the same size. Your different font size dictates taht. Your best bet is to add a padding-top rule to your nav-right elements to bump hem down a bit and line them up with the left side.

Answer 3

You can simply do like that:

.nav
     {
        list-style-type: none;
        overflow: hidden;
        background-color: rgb(238, 238, 238);
     }
    .nav li.nav-left  a
    {
        padding: 16px;
        float: left;
        font-size: 35px;
    }

     .nav li.nav-right a{
        float: right;
        text-transform: uppercase;
        font-size: 20px;
        padding:24px;
     }
     .ot
     {
        color: rgb(255, 165, 0);
     }

Answer 4

Add a line-height: 35px; to the .nav-right -rule.