如何让垂直排列的ul的最后一个li填满剩余部分

Question

     <ul class="TabList">
        <li class="selected"><a><h3>图文</h3></a></li>
        <li class="Commonliend"><a><h3>标题</h3></a></li>
        <li class="Commonliend"><a><h3>正文</h3></a></li>
        <li class="Commonliend"><a><h3>背景</h3></a></li>
        <li class="Commonliend"><a><h3>分割线</h3></a></li>
        <li class="Commonliend"><a><h3>小符号</h3></a></li>
        <li class="liend"></li>
    </ul>

Answer 1

用box布局，不过只有Firefox和chrome支持不较好。。其他浏览器的话你的左边li absolute定位，最后一个li设置padding预留够左边多有li的位置

 <style>
    ul{display:-moz-box;display:-webkit-box;width:100%;list-style:none}
    ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
    ul li:last-child{-moz-box-flex:1;-webkit-box-flex:1;background:#eee}
</style>
<ul>
    <li>1111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>last child</li>
</ul>