Inline, Unordered List Item Высота 100%

Question

Я строю встроенный, неупорядоченный список, который в моем приложении. Первый элемент в этом списке должен иметь свой текст, вертикально выровненный в верхней части списка, а затем должен отображать вертикальную линию справа, которая растягивается до 100% высоты исходного элемента <ul>, например, где 1 - это первый элемент списка и 2 представляет второе:

1 | 2 
    | 2 
    | 2 
    | 2 

Вот разбавленный пример моего кода, который не отображается как в примере выше: http://jsfiddle.net/spryno724/hSpvr/1/. Может ли кто-то настроить CSS, чтобы линия растянулась до 100% высоты?

Я хотел бы избежать использования определенной высоты, например 120px, так как высота других элементов списка может отличаться.

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

Answer 1

Вместо этого вы можете использовать недвижимость display: table-cell;.

http://jsfiddle.net/sg3s/hSpvr/6/

Нет поддержки в IE7, хотя. (http://caniuse.com/#search=table-cell)

Если вам нужен другой способ, я не думаю, что есть один (не все, что изящно).

В качестве дополнительной заметки псевдоселектор :first-child работает в IE7 +, поэтому вам не нужен класс first.

Answer 2

Вам нужно либо использовать абсолютное позиционирование для первого элемента, либо просто использовать границу слева на второй. Правило типа «height: 100%» не будет работать, если ul не имеет явной ширины.