html - 使用块元素重新创建表时设置宽度

我正在尝试使用块元素（在这种情况下为无序列表）重新创建表。我想要这些项目之一来填充父元素。在表中这非常容易。我只是将表格设置为100％，而不指定我要填充父级的任何单元格的宽度。如何使用块元素做到这一点？

使用表格很容易：

<table width="100%" border="1">
    <tr>
        <td width="200">200px</td>
        <td>nice wide column which fills the page</td>
        <td width="100">100px</td>
    </tr>
</table>

但是使用列表项

<style>
    ul {
        list-style-type: none;
        padding-left: 0px;
    }
    li {
        float: left;
    }
    .col1 { width: 200px; }
    .col2 { } /* width: 100% doesn't work */
    .col3 { width: 100px; }
</style>

<ul>
    <li class="col1">200px</li>
    <li class="col2">tight column wrapping around this text</li>
    <li class="col3">100px</li>
</ul>

如何使该中心的“列”填满页面？

最佳答案

这个怎么样？

ul {
    display: inline-table;
}
li {
    display: table-cell;
}
.col1 {
    width: 200px;
}
.col2 {
}
.col3 {
    width: 100px;
}​

证明有效：http://jsfiddle.net/zLvz5/