Button Size for Header Links


#1

I am trying to get my buttons to all be the same size on hover for the header links. At first I tried this by adjusting the padding on the links but this doesn't work because the words have different character lengths. What is the easiest way to set this?


#2

Have you tried making the width and height the same for all ?
If you paste in your code I can help you further


#3

I was thinking about it more and would I just create another div around each of them with a new class and then set the height and width of the div class?

Here is my html code:

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h1>
          Armando Perez
        </h1>
      </div>
      <div class="pull-right">
        <ul>
          <li class="active"><a href="">All</a></li>
          <li><a href="">Consumer</a></li>
          <li><a href="">Mobile</a></li>
          <li><a href="">Commerce</a></li>
          <li><a href="">Enterprise</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

And here is my css:

.header {
color: #FFF;
}

.header ul {
color: #F01251;
margin-top: 30px;
}

.header li {
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;
}

.header a {
color: #F01251;
font-weight: bold;
font-size: 1.2em;
padding: 5px 10px;
}

.header a:hover {
text-decoration: none;
background-color: #EEEEEE;
padding: 5px 10px;
border-radius: 5px;
}

.active a {
color: #FFF;
background-color: #F01251;
border-radius: 5px;
}

.active a:hover {
background-color: #428BCA;
}