Question

我在列表项上遇到行高问题。

简而言之，我们有一个分配给身体的线高，＆lt; li＆gt;显然继承了。

如果我放一个＆lt; span＆gt;在列表项内并指定小于标准正文字体的字体大小，＆lt; li＆gt;保持文档的行高，而不是跨度实际使用的行高。

要考虑的一件事是我对实际HTML的操作非常有限，因为这是由ckeditor（wysiwyg）编辑器创建的HTML。如果您打开该编辑器，创建一些列表项，然后更改字体大小，这就是您所获得的：

<ul>
    <li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
    <li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
    <li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
</ul>

我无法真正改变输出内容，但我们当然可以尝试使用CSS规则来控制它。

我提出了一个说明问题的小说：http://jsfiddle.net/virtualpromote/pW47c/

如果您知道如何制作＆lt; li＆gt;将其行高基于＆lt; span＆gt;的高度在其中，那将是非常棒的。

- Javascipt不是解决此问题的选项。生成的HTML实际上传递到一个应用程序，该应用程序可以动态创建PDF，因此，当然，无法解析我们可以在事后应用的任何JavaScript规则。

Answer 1

您是否尝试将列表元素的行高设置为正常？

li {line-height: normal;}

Answer 2

最简单的方法是不向行高添加单位。只需使用1.3就可以保持你的行高比例。

Answer 3

您是否希望将线高减少.3，以便跨度使用法线高度？如果是这样，您可以执行以下操作：

li {line-height: .8em;}

Answer 4

约翰，

Billy Moat有正确的想法，这样的事情会起作用：

li span { line-height: 10px; display:block; }

span标记与其容器元素li一致。将其更改为阻止强制它在内联元素之外，因此不在li行高之内。

干杯

<li>子元素的行高问题</li>

4 个答案: