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