Question

I have this code :

<a class="botton_menu" href="#">first</a>
<a class="botton_menu" href="#">second</a>
<a class="botton_menu" href="#">third</a>

a.botton_menu
{
    padding:0 14px 0 7px;
    font-family:Arial;
    font-weight:bold;
    font-size:50px;
    line-height:45px;
    background-color:#FF0000;
    color:#781a77;
    margin-bottom:3px;
    height:46px;
    letter-spacing: -3px;
    text-decoration:none;
    display:block;
}

and I’d like to have that red background color as long as the text, not until the screen size (display:block).

How can I do this?

Answer 1

If you insist on having your a elements display:block you need to have them float:left and then clear them. Then the background/element will be as long as the content.