Сохранить пробел из списка из двух столбцов

Question

Я пытаюсь воссоздать поведение таблицы, где у меня есть два столбца, после разрыва строки второго столбца он должен сохранить пробел из первого столбца. Без с добавлением окончательных значений ширины или заполнения/поля.

Редактировать: Чтобы все выяснить. Это именно то поведение, я хочу, я не знаю, почему это так трудно список воссоздавать: http://jsfiddle.net/tLtLM/1/

<ul class="hobby-list"> 
    <li class="first-column">Hobbies:</li> 
    <li><span>Entry, entry, entry, entry, entry, entry, entry, entry, entry</span></li> 
</ul> 

.hobby-list li{ 
display:inline; 
height:100%; 
} 

li.first-column{ 
height:100%; 
} 

http://i.imgur.com/DRyvo.png

Answer 1

Вы можете использовать Flexible Box Layout Module, который в настоящее время рабочий проект:

.hobby-list { 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
} 

.hobby-list li + li { 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
} 

См. this для получения информации о поддержке браузера. Для браузеров, которые не поддерживают Flexbox вы могли бы использовать что-то вроде этого:

.hobby-list { 
    display: table-row; 
} 

.hobby-list li { 
    display: table-cell; 
} 

Answer 2

Используйте HTML с этим ...

CSS:

.hobby-list li 
{ 
    display:inline-block; 
    vertical-align:top; 
} 
.hobby-list li:nth-child(1) 
{ 
    width:80px; 
} 
.hobby-list li:nth-child(2) 
{ 
    width:210px; 
}