40

小提琴

使用无序列表，我感觉这张桌子正在运行。但我不知道如何让表格单元格有 50% 的宽度（我希望每一行都是 100% 的宽度）。我使用display: table-row;and的原因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;
}
4

5 回答 5

49

您快到了。您只需将display: table和添加width: 100%到您的ul.group2. 您也可以不提供 a widthon 您的.group2 p元素而侥幸逃脱。

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

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 ul {
    display: table;
    width: 100%;
}
.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;
}
<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>
    <span class="clear"></span>
</div>

于 2013-03-12T22:11:10.387 回答
9

根据 CSS 的其余部分设置ul为display: table，并为其设置 100% 的宽度以填充父 div。现在你的宽度应该占据你的“行”和“单元格”。

编辑：根据上面的 kpeaatt，谁跑得更快！

于 2013-03-12T22:11:44.957 回答
1

我找到了从引导源代码中设置表格单元格 100% 宽度的最佳方法。

设置width:10000px，它呈现为 100% 宽度。

https://jsfiddle.net/y3qsxb9m/

于 2016-01-13T09:51:39.793 回答
0

使用以下内容：

  display:table-cell;
  width: 100vw;
于 2019-05-14T11:25:34.833 回答
-8

为了

display: table-cell;

环境

width:10000px;

充当

width:100%;

所以，如果你想要 50% 的宽度，只需使用

width: 5000px;
于 2016-04-13T21:24:42.490 回答