Make-Display table-cell Verwendung prozentuale Breite

Question

Fiddle

Ich habe diese Tabelle bekam das Gefühl geht, eine ungeordnete Liste. Aber ich kann nicht herausfinden, wie die Tabellenzellen 50% Breite haben (ich möchte, dass jede Zeile 100% breit ist). Der Grund, warum ich display: table-row; und display: table-cell; verwende, ist so, dass ich die Daten vertikal ausrichten kann, wenn der Parametertext mehr als eine Zeile ist. Ich möchte keinen tatsächlichen Pixel- oder Em-Wert für die Breite verwenden, denn ich möchte es nur in Prozent, wenn es möglich ist. Ich würde eher die vertikale Ausrichtung aufgeben. Bitte kein Javascript. Vielen Dank!

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

Sie sind fast da. Sie müssen nur display: table und width: 100% zu Ihrem ul.group2 hinzufügen. Sie könnten wahrscheinlich auch damit davonkommen, keine width auf Ihre .group2 p Elemente zu liefern.

sollte diese Arbeit: http://jsfiddle.net/6Kn88/2/

Answer 2

die ul zu display: table in Übereinstimmung mit dem Rest Ihres CSS Set, und es hat eine Breite von 100% geben die Eltern div zu füllen. Jetzt sollten Ihre Breiten für Ihre "Zeilen" und "Zellen" festhalten.

Edit: Per kpeatt, oben, wer war schneller vom Fleck!

Answer 3

Ich fand den besten Weg, um Tabelle-Zelle div 100% Breite aus Bootstrap-Quellcode zu setzen.

Set width:10000px, es gerendert wie 100% Breite.

https://jsfiddle.net/y3qsxb9m/

Answer 4

Für

display: table-cell; 

Einstellung

width:10000px; 

als

handelten

width:100%; 

Also, wenn Sie 50% der Breite verwenden wollen nur

width: 5000px;