Bootstrap: CSS - высота элемента списка-списка

Обратите внимание на JSFiddle:

http://jsfiddle.net/7W2r4/12/

Как вы могли заметить: list-group-item полностью рухнул. И я не могу заставить его автонастраиваться. (например, height:auto;)

но когда я поставлю правило css: height:20px;, тогда размер строки будет скорректирован. Как настроить высоту элемента списка-списка для изменения размера содержимого?

Спасибо за ваше время.

Ответы

Ответ 1

Вы можете добавить overflow:hidden или другой код "clear-fix" в элемент списка-списка, если вам нужно сохранить поплавки внутри элементов. Поплавки всегда вызывают проблемы с высотой перемещаемых элементов. Очистка или переполнение потока заставит высоту вычисляться должным образом. Смотрите CSS: плавающие divs имеют 0 height для получения дополнительной информации об этом.

.list-group-item
{
  overflow:hidden;  
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}

Поскольку вы используете Bootstrap, вы можете добавить class="clearfix" в HTML для list-group-items

Ответ 2

Удаление float: left; из .itemDescription исправит вашу проблему fiddle, поэтому полный стиль для .itemDescription будет:

.itemDescription
{
    width: 30%;
    vertical-align: middle;
    height: 100%;
    line-height:100%;
    vertical-align: middle;
}