ul不拉伸宽度以填充div的空间

Question

I am trying to get my ul (containing li elements) to stretch as necessary in order to fill the available width of the div that it is in, but for some reason it is not working. I tried using display: table; and table-layout: fixed; but they didn't work for me either.

 .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; display: block; zoom: 1; display: table; } #menu ul:after { content: ' '; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #menu ul li { float: left; display: block; padding: 0; display: table-cell; } #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; } #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> 

Answer 1

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>