顯示 table-cell 使用百分比寬度

問題描述

我有這張桌子的感覺，使用無序列表。但我不知道如何讓 table-cells 有 50％的寬度 (我希望每一行都是 100％的寬度) 。我使用 display: table-row; 和 display: table-cell; 的原因是，如果引數文字多於一行，我可以 vertical-align 的資料。我不想使用一個實際的畫素或 em 值的寬度，因為，好的，我只是想要它的百分比如果它的可能。我寧願放棄 vertical-align 。請不要 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;
}

最佳解決方案

你幾乎在那裡您只需要將 display: table 和 width: 100% 新增到您的 ul.group2 。您也可能不要在.group2 p 元素上提供 width 。

這應該工作：http://jsfiddle.net/6Kn88/2/

次佳解決方案

根據 CSS 的其餘部分，將 ul 設定為 display: table，並將其寬度設定為 100％以填充父 div 。現在您的寬度應該適用於您的”rows” 和”cells” 。

編輯：按照上面的 kpeatt，誰是更快的標記！

參考文獻

Make display table-cell use percentage width

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

顯示 table-cell 使用百分比寬度