使显示表格单元格使用百分比宽度

Question

小提琴

我使用无序列表让这张表感觉良好.但我无法弄清楚如何让表格单元格具有50%的宽度(我希望每一行都是100%宽度).我使用的原因display: table-row;和display: table-cell;是这样我可以垂直对齐的数据,如果该参数文本超过一行.我不想为宽度使用实际的像素或em值,因为,如果可能的话,我只想要百分比.我宁愿放弃垂直对齐.请不要javascript.谢谢!

HTML:

<div class="group group2">
    <h2>Health Indicies</h2>
    <ul>
        <li><p class="parameter">GGP</p><p class="data">265</p></li>
        <li><p class="parameter">Comfort</p><p class="data">blah</p></li>
        <li><p class="parameter">Energy</p><p class="data">gooo</p></li>
    </ul>
</div>

CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.group {
    width: 50%;
    margin-bottom: 20px;
    outline: 1px solid black;
    background: white;
    box-shadow: 1px 1px 5px 0px gray;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.group h2 {
    display: block;
    font-size: 14px;
    background: gray;
    text-align: center;
    padding: 5px;
}
.group li {
    clear: both;
}
.group p {
    padding: 3%;
    text-align: center;
    font-size: 14px;
}
.group2 li {
    display: table-row;
}
.group2 p {
    display: table-cell;
    vertical-align: middle;
    width: 46%;
    border-bottom: 2px solid gray;
}
.group li:last-child p {
    border-bottom: 0;
}

Answer 1

你快到了.你只需要添加display: table和width: 100%你的ul.group2.你很可能也逃脱不提供一个width在你的.group2 p元素.

这应该工作:http://jsfiddle.net/6Kn88/2/

Answer 2

根据CSS的其余部分设置ulto display: table,并给它一个100%的宽度来填充父div.现在你的宽度应该保持你的"行"和"细胞".

编辑:按照上面的kpeatt,谁更快离开了标记!