Ответ 1
Ты почти там. Вам просто нужно добавить display: table
и width: 100%
к вашему ul.group2
. Вероятно, вы также можете уйти, не поставляя width
в своих .group2 p
элементах.
Это должно работать: http://jsfiddle.net/6Kn88/2/
У меня эта таблица ощущается, используя неупорядоченный список. Но я не могу понять, как заставить ячейки таблицы иметь ширину 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;
}
Ты почти там. Вам просто нужно добавить display: table
и width: 100%
к вашему ul.group2
. Вероятно, вы также можете уйти, не поставляя width
в своих .group2 p
элементах.
Это должно работать: http://jsfiddle.net/6Kn88/2/
Установите ul
в display: table
в соответствии с остальной частью вашего CSS и дайте ему ширину 100% для заполнения родительского div. Теперь ваши ширины должны удерживаться для ваших "строк" и "ячеек".
Изменить: В соответствии с kpeatt, выше, кто был быстрее с меткой!
Я нашел лучший способ установить ширину таблицы 100% таблицы из исходного кода начальной загрузки.
Установите width:10000px
, он будет отображаться как 100% -ная ширина.
Используйте следующее:
display:table-cell;
width: 100vw;
Для
display: table-cell;
настройка
width:10000px;
действовал как
width:100%;
Итак, если вы хотите, чтобы 50% ширины просто использовало
width: 5000px;