我正在构建一个在我的应用程序中的内联无序列表。此列表中的第一项应使其文本垂直对齐到列表顶部，然后应在其右侧显示一条垂直线，其延伸到父<ul>元素的100％高度，如下所示，其中1为第一个列表项，2表示第二个：
1 | 2
| 2
| 2
| 2
以下是我的代码的淡化示例，它不像上面的示例那样显示：http://jsfiddle.net/spryno724/hSpvr/1/。有人可以调整CSS，使线条延伸到100％高度吗？
我希望避免使用特定的高度，例如120px，因为其他列表项的高度可能会有所不同。
感谢您的时间。
答案 0 :(得分：4)
您可以改为使用属性display: table-cell;。
http://jsfiddle.net/sg3s/hSpvr/6/
虽然不支持IE7。 （http://caniuse.com/#search=table-cell）
如果你需要一种不同的方式，我认为没有一种方式（无论如何都不是优雅的。）
作为旁注，伪选择器:first-child在IE7 +中工作，因此您不需要first类。
答案 1 :(得分：0)
您需要在第一个项目上使用绝对定位，或者在第二个项目上使用边框左侧。除非ul具有明确的宽度，否则像'height：100％'这样的规则将不起作用。