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

     <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>

用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>

不知道你是说怎么个撑满；我理解如下

把ul 设背景，li设边框区分两个li
最后一个右边框不设

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

test ul { list-style:none; margin:0; padding:0; width:800px; color:#fff; border:1px solid #050; } li { float:left; margin:1px; width:100px; height:28px; line-height:28px; background:#050; } .liend { float:none; width:auto; }

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab End

你指的应该是每个li一样的宽度吧？统一设置一下li的宽度就行了：.TabList li{ width:200px;}

你可以先选择到ul里面的最后一个li，然后对它的属性操作

 ul:last-child li
{
   width:100%;
}