40

フィドル

順序付けられていないリストを使用して、このテーブルの雰囲気を整えました。しかし、テーブルセルの幅を 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;
}
4

5 に答える 5

49

あなたはほとんどそこにいます。display: tableとwidth: 100%をに追加するだけですul.group2。widthおそらく、.group2 p要素に a を指定しなくても済む可能性があります。

これはうまくいくはずです：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、幅を 100% にして親 div を埋めます。display: tableこれで、「行」と「セル」の幅が保持されます。

編集：上記のkpeattによると、誰がマークを外したのが速かったのですか！

于 2013-03-12T22:11:44.957 に答える
1

ブートストラップ ソース コードからテーブル セルの div を 100% 幅に設定する最良の方法を見つけました。

を設定width:10000pxすると、幅 100% のようにレンダリングされます。

https://jsfiddle.net/y3qsxb9m/

于 2016-01-13T09:51:39.793 に答える