Stretch Horizontal Ul to Fit Width of Div

Stretch horizontal ul to fit width of div

This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/

(or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/)

This won't work in IE7.

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

_{Old answer before your edit: http://jsfiddle.net/thirtydot/DsqWr/}

Making an unordered list stretch horizontally so as to always fill up a div

Try this

 ul { padding:0; margin:0; white-space:nowrap; }
 li { width: 100%; list-style-type:none; display:inline-block; }

or

ul {
  width: 100%;
  display: table;
  table-layout: fixed;
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

Stretch UL to fill the entire DIV

Why don't you try with em instead of percentage, or you can use a JavaScript like:

document.getElementById('ul').style.width=(document.body.clientWidth-10)*9;

You need to adjust the values of 10 and 0.9 accordingly.

Or, something like:

var viewportwidth;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth;
}
 var boxwidth = parseInt(viewportwidth)*0.57;
var boxwidth2 = parseInt(boxwidth)+6;
window.onload=function(){

document.getElementById('ul').style.width = boxwidth2 + 'px';
}

I did not test this code though.

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:

1. Use display: flex on the <ul> element, and allowing wrapping within it by setting flex-wrap: wrap
2. Ditch float: left on the inner <li> element. Use flex-grow: 1 to allow them to fill up remaining space on each row.
3. 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>

Centering a ul stretch full width div

Full width of the container/div (horizontal). with equal amount of (margin) in between the li's, for every viewport as you wish.

You can try with flexbox like this, if that's what you want:

.button-row {  background-color: #fcfcfc;  height: 70px;  width: 100%;}.button-row ul {  list-style: none;  margin: 0;  padding: 0;  display: flex;  align-items: center;  justify-content: space-between;}.button-row ul li {  display: block;  list-style: none;  margin: 0;  padding: 0;  width: 20%;  text-align: center;}.button-row ul li a {  display: block;  margin: 0 0 0 1px;  padding: 3px 10px;  text-decoration: none;  line-height: 1.3em;}

<div class="container-fluid">  <div class="row">    <div class="button-row">      <ul>        <li><a>Additional information</a>        </li>        <li><a>Current exchange rates</a>        </li>        <li><a>ATMs and institutions</a>        </li>        <li><a>Protection</a>        </li>        <li><a>Files to download</a>        </li>      </ul>    </div>  </div></div>

How to make an inline ul stretch full width of container

#main_navigation ul li {
  display: inline-block;
  font-size:24px;
}

#main_navigation ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #cbc19e;
  background-color: #322918;
  width: 200px;
  display: block;
}

Change the display attribute to inline-block and block respectively, and set width to whatever you want.

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

---

Related Topics