CODEWITHSUNDEEP
css
Leo
Leo

Reputation: 2072

Forcing <a> tag have the same height as parent <li>

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>

Upvotes: 0

Views: 3824

Answers (3)

Shawn Taylor
Shawn Taylor

Reputation: 3969

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/

Upvotes: 3

Dave Everitt
Dave Everitt

Reputation: 17866

the a tag should be display:block, then it will fill the parent. And lose the padding on the li tag.

Upvotes: 0

Derik Nel
Derik Nel

Reputation: 423

Have you tried :

#topbar a {
    background-color: yellow;
    display: inline-block;
}

Upvotes: 0

Related Questions