Question

I am building an inline, unordered list that in my application. The first item in this list should have its text vertically aligned to the top of the list, then should display a vertical line to its right that stretches to 100% height of the parent <ul> element, like so, where 1 is the first list item, and 2 represents the second:

1 | 2
  | 2
  | 2
  | 2

Here is a watered down example of my code, which does not display like the example above: http://jsfiddle.net/spryno724/hSpvr/1/. Could someone please adjust the CSS so that the line stretches to 100% height?

I would like to avoid using a specific height, such as 120px, since the height of the other lists items may vary.

Thank you for your time.

Answer 1

You could use the property display: table-cell; instead.

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

No support in IE7 though. ( http://caniuse.com/#search=table-cell )

If you need a different way, I don’t think there is one (not anything that gracefull anyway).

As a side note, the pseudo selector :first-child works in IE7+ so you don’t need that first class.