Question

我正在尝试使用块元素重新创建表（在本例中是无序列表）。我想要其中一个项填充父元素。这在表格中非常容易。我只是将表设置为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>

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

Answer 1

通常我会使用javascript或计算宽度。但是，使用CSS，这是一个糟糕的解决方案：使用col2的样式（中间列）：

.col2
{
   margin:0 100px 0 200px; 
   float:none;
}
also, use add this style to col3:
.col3
{
   float:right;
}

最后一次修改：更改li订单，以便最后添加中心列，如：

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

同样，这是一个糟糕的解决方案（imo）。

Answer 2

这个怎么样？

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

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

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

2 个答案: