CODEWITHSUNDEEP
htmlcss
sazr
sazr

Reputation: 25928

HTML a element doesn't expand to parent li dimensions

I have a horizontal nav bar, and my a elements are not expanding to be the width & height of the parent li element.

How can I fix my CSS so that the a elements are as wide & tall as the outer/parent li element?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
    <!--
        #navbar {
            width: 450px;
            height: 40px;
            background-color: RGB(112,112,112);
            list-style: none;
        }

        #navbar li {
            width: 112.5px;
            height: 40px;
            display: inline; 
            float: left;
        }

        #navbar li a {
            color: white;
            width: 112.5px;
            height: 40px;
        }

        #navbar a:link {
            background-color: red;
        }

        #navbar a:visited {
            background-color: purple;
        }

        #navbar a:active {
            background-color: green;
        }
        #navbar a:hover {
            background-color: blue;
        }
    -->
    </style>
</head>
<body>

    <ul id="navbar">
        <li><a href="">home</a></li>
        <li><a href="">contact us</a></li>
        <li><a href="">about us</a></li>
        <li><a href="">other</a></li>
    </ul>

</body>
</html>

Upvotes: 0

Views: 902

Answers (4)

Kennith Nichol
Kennith Nichol

Reputation: 338

I have indented the additional lines to help with appearance. The a elements must be set to display:block as mentioned by sdleihssirhc. Notice also that by adding some padding to the top ( and subtracting from the overall height of the block) we have some vertical centering as well.

<style type="text/css">
<!--
#navbar {
    width: 450px;
    height: 40px;
    background-color: RGB(112,112,112);
    list-style: none;
        padding: 0;
}

#navbar li {
    width: 112.5px;
    height: 40px;
    display: inline; 
    float: left;
}

#navbar li a {
        display: block;
        float:left;
        padding-top: 6px;
        text-align: center;
    color: white;
    width: 112.5px;
    height: 34px;
}

#navbar a:link {
    background-color: red;
}

#navbar a:visited {
    background-color: purple;
}

#navbar a:active {
    background-color: green;
}
#navbar a:hover {
    background-color: blue;
}
-->
</style>

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Modify your CSS as follows:

#navbar li a {
...
    display: table;
    height: 100%;
    width: 100%;
...
}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Make all a elements display: inline-block.

It combines the best of both worlds - you can put them side-by-side without the need for float, and give them whatever width and height you choose. You can even use vertical-align to determine how it should be aligned with surrounding text!

Upvotes: 1

sdleihssirhc
sdleihssirhc

Reputation: 42496

By making all a elements display:block

But why, sdleihssirhc? Why?

Because the <a> element is an inline element by default, which means (among many, many other things) you cannot give it a width or a height. If you try, the browser will ignore you.

Upvotes: 5

Related Questions