Stretching <a> tag to fill entire <li>

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

Just style the A with a display:block;:

ul#menu li a { display: block;}

Solution 3 - Html

display:flex

is the HTML5 way.

See Fiddle

Useful to hack frameworks buttons, or any other element, but you may need to remove their padding first, and set them to the desired height.

In this case, angular-material tabs, which are kind of tricky to make them work as a "standard" website nav.

Notice that the pointer changes as soon as you enter the tab : the < a > are now stretched to fit their parent dimensions.

Out of topic, notice how flawless angular-material displays the ripple effect, even on a "large surface".

.md-header{
/* THIS IS A CUSTOM HEIGHT */
    height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

md-tab{    
    padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

a{
	display: flex;
	align-items: center;
	justify-content: center; 
	height: 100%; 
}

UPDATE 2018

AngularJS Material throws a (gentle) warning when using flex on button elements, so don't assume all HTML elements/tags can handle display:flex properly, or have a homogeneous behaviour across browsers.

Remember to consult flexbugs in case of unexpected behaviour in a particular browser.

Solution 4 - Html

A different approach:

<ul>
    <li>
        <a></a>
        <img>
        <morestuff>TEXTEXTEXT</morestuff>
    </li>
</ul> 

a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: [higher than anything else inside parent]
    width:100%;
    height: 100%;
}

This is helpful if the link's container also has images and such inside of it, or is of potentially different sizes depending on image / content size. With this, the anchor tag itself can be empty, and you can arrange other elements inside of anchor's container however you want. Anchor will always match the size of the parent, and will be on top, to make the entire li clickable.

Solution 5 - Html

I used this code to fill the width and height 100%

HTML

<ul>
    <li>
        <a>I need to fill 100% width and height!</a>
    </li>
<ul>

CSS

li a {
   display: block;
   height: 100%; /* Missing from other answers */
}

Solution 6 - Html

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;  
 
  }

Solution 7 - Html

<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
    display:block;
}
</style> 
</head>
<body>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">Test</a></li>
    </ul>
</body>
</html>

You should try to avoid using a class on every tag so your content remains easy to maintain.

Solution 8 - Html

Use line-height and text-indent instead of padding for li element, and use display: block; for anchor tag

Solution 9 - Html

I wanted this functionality only on tab view i.e below 720px, so in media query I made:

@media(max-width:720px){
  a{
    display:block;
    width:100%;
  }
}

Solution 10 - Html

If your <li>s had to have a specific height then your <a>s would only stretch to the <li>'s width and not the height anymore. One way I solve this is to use CSS display:block and add paddings to my <a>s OR wrap the <a>s around the <li>s

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Pieter	View Question on Stackoverflow
Solution 1 - Html	Dave Markle	View Answer on Stackoverflow
Solution 2 - Html	bluesmoon	View Answer on Stackoverflow
Solution 3 - Html	Christian Bonato	View Answer on Stackoverflow
Solution 4 - Html	aidan	View Answer on Stackoverflow
Solution 5 - Html	Michael	View Answer on Stackoverflow
Solution 6 - Html	Pranav B	View Answer on Stackoverflow
Solution 7 - Html	Jake	View Answer on Stackoverflow
Solution 8 - Html	niyas	View Answer on Stackoverflow
Solution 9 - Html	Michael Philips	View Answer on Stackoverflow
Solution 10 - Html	Jnr	View Answer on Stackoverflow