Stretching <a> tag to fill entire <li>

Question

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?

Answer 1

The "a" tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn't make sense to supply the width of the element, because you don't necessarily know if it's going to wrap or not. In order to set its width, you must change its display property to block:

a.wide {
    display:block;
}

...

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

If memory serves, you can set the width on certain inline level elements in IE6, though. But that's because IE6 implements CSS incorrectly and wants to confuse you.

Answer 2

Just style the A with a display:block;:

ul#menu li a { display: block;}