Home/ Questions/Q 7516001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:59:33+00:00

I am designing a top bar for a website and cannot figure out how

  • 0

I am designing a top bar for a website and cannot figure out how to force the <a> elements below have the same height as the parent <li> elements. The code below shows the <li> elements with a green background and the <a> elements with a yellow background. I would like to have the yellow boxes span the whole height of the green boxes. Setting the height of the <a> elements to 100% doesn’t do trick. What am I missing?

<!DOCTYPE html>
<head>
  <style>
    div#topbar {
      width: 100%;
      height: 30px;
      top: 0;
      border: 1px solid black;
    }   
    #topbar ul {
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 30px;
    }
    #topbar ul li {
      margin: 0;
      padding: 0 10px;
      background-color: green;
      display: inline;
      float: left;
    }
    #topbar a {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="topbar">
    <ul>
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a></li>
    </ul>
  </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Its because tag is an inline element and it doesn’t take height into account so you need make it block which can be made by various methods but most suitable in your case is ‘float’.

        div#topbar {
  width: 100%;
  height: 30px;
  top: 0;
  border: 1px solid black;
}   
#topbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 30px;
}
#topbar ul li {
  margin: 0;
  padding: 0 10px;
  background-color: green;
  display: inline;
  float: left;
}
#topbar a {
  background-color: yellow;
  float:left; /*add this*/
}

    http://jsfiddle.net/YMPe2/

    • 0