Stretching <a> tag to fill entire <li>

user_217649 0
Viewed 66308

Here's a simple menu structure:

<ul id="menu">
  <li><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">Test</a></li>
</ul>

I want the <a> to be stretched so that it fills the entire <li>. I tried using something like width: 100%; height: 100% but that had no effect. How do I stretch the anchor tag correctly?

xhtml css html
10 Answers

Just changing the display property to block didn't work for me. I removed the padding of li and set the same padding for a.

  li a {
        display:block;  
        padding: 4px 8px;  

  }
user_102930240
Related