Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stretching <a> tag to fill entire <li>

Tags:

html

css

xhtml

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?

like image 553
Pieter Avatar asked Jul 16 '10 11:07

Pieter


People also ask

How do you make a full width UL?

Basically, you just have to apply display: block , float: left and width: 33.3% on <li> elements to make them stretch out the full width of the <ul> element, which is already at 100% of the containing <div> .

How do I change the width of a Li in HTML?

You'd have to work on your code because you can't assign widths to inline elements. But this can be solved by setting the display to block and by floating it.

How do you increase the size of a tag?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.


2 Answers

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, or inline-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.

like image 69
Dave Markle Avatar answered Sep 19 '22 10:09

Dave Markle


Just style the A with a display:block;:

ul#menu li a { display: block;} 
like image 43
bluesmoon Avatar answered Sep 17 '22 10:09

bluesmoon