内联，无序列表项高度100％

Question

我正在构建一个在我的应用程序中的内联无序列表。此列表中的第一项应使其文本垂直对齐到列表顶部，然后应在其右侧显示一条垂直线，其延伸到父<ul>元素的100％高度，如下所示，其中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

您需要在第一个项目上使用绝对定位，或者在第二个项目上使用边框左侧。除非ul具有明确的宽度，否则像'height：100％'这样的规则将不起作用。