垂直对齐文字,非标准情况

时间:2013-09-15 18:04:33

标签: jquery html css

我正在使用CSS计数器和伪元素来自定义有序列表编号 - jsFiddle

我想要实现的目标是将文本在<li>元素中垂直对齐,只要它是单行,否则保持它与顶部对齐。

以下是我希望它如何显示的预览 - http://cl.ly/image/2f1U1p0k2M14

任何解决方案(甚至涉及JS / jQuery)都会非常感激。

2 个答案:

答案 0 :(得分:2)

您必须使用Javascript(jQuery)来检查每个 li元素的高度。

如果heightfont-size * line-hight相同,则添加“单行”类,如果它更大,则添加“多行”类。

在CSS中,您可以设置类及其各自的垂直值。

或者,如果使用少量代码,则将其设为“默认”,只有在不同的情况下才添加一个类。

PS:感谢@Marc Audet的评论是一个补充 如果您使用min-height,那么您必须确保您的字体大小和行高值足够高,以便双行条目至少比min-height值高1px!

答案 1 :(得分:0)

老实说,设计相当不一致。没有javascript就没有办法告诉,即使这只能在onload上工作。如果用户通过浏览器增加了字体大小,您将遇到另一堆问题,因为您无法检测到它们何时这样做。