How do I fit the width of li's in ul?

I have a ul of width 开发者_如何学Go600px and I have 4 li's which donot take up the entire 600px. How do I automatically fit the li's such that they take the entire 600px? I do not want to hardcode the width's of li's as I use the classes at various locations.Below is the screenshot, I am trying to set the menu "Newest, Hot Votes Active" fit the entire ul.

    #content-tabs {
  background-color: #78ae09;
  float: left; /* LTR */
  margin: 20px 0;
  padding: 0;
-moz-box-shadow: 0px 2px 3px #c4c4c4;-webkit-box-shadow: 0px 2px 3px #c4c4c4;box-shadow: 0px 2px 3px #c4c4c4;

}

#content-tabs ul.primary,
#content-tabs ul.secondary {
/*  border-bottom: 1px solid #000;*/
  clear: both;
  float: left; /* LTR */
  margin: 0;
  padding: 7px 10px 0px 0px;
  width:100%;
}

#content-tabs ul.secondary {
  border-bottom: 1px solid #555;
  margin-top: 10px;
  text-transform: lowercase;
}

#content-tabs ul.primary li,
#content-tabs ul.secondary li {
  border-style: none;
  display: inline-block;
  float: left; /* LTR */
  list-style: none;
  margin: 0 10px;
  padding: 0;
  white-space:nowrap;
}

#content-tabs ul.primary li a:link,
#content-tabs ul.primary li a:visited,
#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited {
  background-color: transparent;
  border: none;
  color: #fff;
  float: left; /* LTR */
  font-weight: bold;
  margin: 0;
  padding: 3px 0 6px 0;
  text-decoration: none;
  white-space: nowrap;
}

#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited {
  color: #555;
}

#content-tabs ul.primary li a.active:link,
#content-tabs ul.primary li a.active:visited {
  color: #fff;
  padding-bottom: 2px;
}

#content-tabs ul.secondary li a.active:link,
#content-tabs ul.secondary li a.active:visited {
  color: #fff;
  padding-bottom: 2px;
}

#content-tabs ul.primary li a:hover,
#content-tabs ul.primary li a:focus,
#content-tabs ul.secondary li a:hover,
#content-tabs ul.secondary li a:focus {
  color: #fefefe;
  padding-bottom: 2px;
  font-weight:bold;
}

width: auto; will do that, unless there are other conflicting rules that affect the size (e.g., display: inline; would cause problems).

Block elements with width: auto; expand to take up the full width of their parent.

display:block;

it will be easier to give answer if you post some code

If you want them lined up side-by-side, use this:

  ul {
    list-style:none;
    width:600px;
    padding:0;
    overflow:auto;
  }
  li {
    float:left;
    width:25%;
  }

Working example: http://jsbin.com/oqawud/edit

If you want them stacked, use this:

  ul {
    list-style:none;
    width:600px;
    padding:0;
    overflow:auto;
  }
  li {
    width:auto;
  }

Working example: http://jsbin.com/oqawud/2/edit

Perhaps something like this ...

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<style>
ul{
  width:600px;
  list-style:none;
}

li{
  float:left;
  width:25%;
}
</style>

Most solutions posted require you to explicitly set the width of each li to 25%. I personally find that this can give the appearance of inconsistent white space either side of the text enclosed within the li's, so on such occasions, I prefer to use an table to solve this problem.

this will work, you can improve the way it looks but it does what you want: http://jsbin.com/oqawud/11