Question

I’m doing a horizontal bar of buttons with CSS so I can have something like this:

+-----------+------------+-------------+------------+
| Button 1  | Button 2   | Button 3    | Button 4   |
+-----------+------------+-------------+------------+

But I don’t understand why my button text is bigger than the <li />that contains that <a />. I’ve done a jsfiddle example to show what happens, you can check it here: http://jsfiddle.net/7m4rE/ .

How I can solve this problem? I’m only supporting IE9+ and last Chrome, FF, Opera.

Thank you in advance

Answer 1

Don’t set an explicit height on either your li or your a. Rather, let your padding and margin on the a determine how tall the elements will be.

Fiddle: http://jsfiddle.net/7m4rE/1/