Home/ Questions/Q 7174841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:08:48+00:00

I have a horizontal nav bar, and my a elements are not expanding to

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0