Stretching <A> Tag to Fill Entire <Li>

Stretching a tag to fill entire li

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.

Stretching a tag to fill parent li in horizontal list

If I get it right, then you just have to remove the padding from the li element and add it to the a. Also you have to change the display type:

#primary-menu li{
  list-style-type:none;
  display: inline-block;
  margin: 8px;
}

#primary-menu li a {
   padding: 5px 30px;
   display:block;
}

See: http://jsfiddle.net/v6ZFx/

How do I make an a tag the size of it's parent li tag for larger clickable region?

As others have said

li a { display: block; }

should achieve what you're after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:

li { padding: 0; }
  li a { display: block; padding: 1em; }

Stretch list items li to fill the width of ul

Demo
HI now you can do this

Used to display :table and display:table-cell

as like this

Css

ul {
    border:1px dotted black;
    padding: 0;
    display:table;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
li {
    background-color: red;
    display:table-cell;
}
li:nth-child(2n) {
    background-color: #0F0;
}

Now define your parent display:table; or width:100%; and define your child display:table-cell;

Demo

stretching link throughout entire li

You then should move some of the li css to the a css - like so

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;

}

#navbar ul li a {
    display: block;
    height: 100%;
   padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}

ul not stretching width to fill div's space

For dynamic space filling layout, you will have to look at using CSS flexbox. Most modern browsers in use today actually support it (85% unprefixed, 97% global), so you can treat it as a graceful degradation for users on browsers that do not, or progressive enhancement for users on browsers that do ;)

All you need to change is the following:

Use display: flex on the <ul> element, and allowing wrapping within it by setting flex-wrap: wrap
Ditch float: left on the inner <li> element. Use flex-grow: 1 to allow them to fill up remaining space on each row.
For a better visual effect, use text-align: center on the nested <a> element so that months appear visually centered in all links.

.wrapper {  width: 90%;  height: auto;  margin: 10px auto 10px auto;  border: 2px solid #000000;  background-color: #0099cc;}#menu {  background: #ffffff;  margin-bottom: 50px;}#menu ul {  list-style: none;  margin: 0;  padding: 0;  line-height: 1;  /* Added the following for flexbox */  display: flex;  flex-wrap: wrap;}#menu ul:after {  content: ' ';  display: block;  font-size: 0;  height: 0;  clear: both;  visibility: hidden;}#menu ul li {  display: block;  padding: 0;  /* Added the following for flexbox */  flex-grow: 1;}#menu ul li a {  color: #000;  text-decoration: none;  display: block;  padding: 15px 25px;  font-family: 'Work Sans', sans-serif;  font-size: 1.5em;  font-weight: 500;  position: relative;  -webkit-transition: color .25s;  -moz-transition: color .25s;  -ms-transition: color .25s;  -o-transition: color .25s;  transition: color .25s;  /* Added the following for flexbox */  /* So that text appear visually centered */  text-align: center;}#menu ul li a:hover {  color: #000;}#menu ul li a:hover:before {  width: 100%;}#menu ul li a:before {  content: '';  display: block;  position: absolute;  left: 0;  bottom: 0;  height: 3px;  width: 0;  background: #000;  -webkit-transition: width .25s;  -moz-transition: width .25s;  -ms-transition: width .25s;  -o-transition: width .25s;  transition: width .25s;}#menu ul li.last > a:after,#menu ul li:last-child > a:after {  display: none;}#menu ul li.active a {  color: #000;}#menu ul li.active a:before {  width: 100%;}

<div class="wrapper">  <div>    <h1>Page title</h1>  </div>  <div id="menu">    <ul>      <li><a><span>January</span></a>      </li>      <li><a><span>February</span></a>      </li>      <li><a><span>March</span></a>      </li>      <li><a><span>April</span></a>      </li>      <li><a><span>May</span></a>      </li>      <li><a><span>June</span></a>      </li>      <li><a><span>July</span></a>      </li>      <li><a><span>August</span></a>      </li>      <li><a><span>September</span></a>      </li>      <li><a><span>October</span></a>      </li>      <li><a><span>November</span></a>      </li>      <li><a><span>December</span></a>      </li>      <li><a><span>Spring</span></a>      </li>      <li><a><span>Summer</span></a>      </li>      <li><a><span>Autumn</span></a>      </li>      <li><a><span>Winter</span></a>      </li>    </ul>  </div></div>

Stretch li background to fill width of ul

I think this will work for you fine:

I have added this following code:

#messages li {
    padding: 5px 10px;
    width: calc(100% + 30px);
    margin-left: -15px;
}

html,body {  height: 100%;  background-color: #E5E5E5;}
#nav-bar {  margin-bottom: 0;}
#messages {  list-style-type: none;  margin: 0;  padding: 0;  width: 100%;}
#messages li {  padding: 5px 10px;  width: calc(100% + 30px);  margin-left: -15px;}
#messages li:nth-child(even) {  background: #88e9e1;}
#online-users {  list-style-type: none;  padding-left: 0;}
#online-users li:nth-child(odd) {  color: #373737;}
#online-users li:nth-child(even) {  color: #777777;}
#container {  height: 100%;}
#middle-div {  border-radius: 3px;  border: 1px solid #202020;}
#chat-column {  height: 65vh;  border-top-left-radius: 3px;  border-bottom-left-radius: 3px;  border-right: 1px solid #202020;  /* Keep messages from overflowing out of rectangle */  word-wrap: break-word;  /* Contain messages as a scrollable list inside the rectangle */  overflow-y: auto;}
#users-column {  height: 65vh;  border-top-right-radius: 3px;  border-bottom-right-radius: 3px;  border-left: 1px solid #202020;  /* Keep usernames from overflowing out of rectangle */  word-wrap: break-word;  /* Contain usernames as a scrollable list inside the rectangle */  overflow-y: auto;}
#bottom-div {  margin-top: 15px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container" id="container">  <div class="row" id="top-div">    <!-- The users username -->    <h3 class="text-primary">    Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1>  </div>  <div class="row" id="middle-div">    <div class="form-group" id="chat-and-users">      <div>        <div class="col-xs-9 bg-info" id="chat-column">          <!-- Chat Column -->          <ul id="messages">            <li>Test Text</li>            <li>Test Text</li>            <li>Test Text</li>            <li>Test Text</li>          </ul>        </div>        <div class="col-xs-3 bg-success" id="users-column">          <!-- Users Column -->          <h4><b>Online Users:</b></h4>          <ul id="online-users">            <li>Test Text</li>            <li>Test Text</li>            <li>Test Text</li>            <li>Test Text</li>          </ul>        </div>      </div>    </div>  </div>  <div class="row" id="bottom-div">    <form action="" id="input-button-form">      <div class="form-group">        <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message...">      </div>      <button type="submit" id="button-send" class="btn btn-primary">Submit</button>    </form>  </div></div>

Stretching the ul-li menu with padding to fit the full width

The following changes will make the list-items expand to fill the container.

ul {
    display:table;
    width:100%;
}

li {
    display:table-cell;
}

a {
    display:block
}

The one caveat is that display:table-cell and display:table are not supported natively in IE6/7 so if you need to support those browsers then you will need another solution. With IE6 usage down to just 7.1% and IE7 usage at 2.54%, I know fewer and fewer designers are supporting them.

Stretching <A> Tag to Fill Entire <Li>