html - 内联、无序列表项高度 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%' 这样的规则将不起作用。