2

我对列表项的行高有疑问。

简而言之，我们为正文分配了一个行高，<li> 显然继承了该行高。

如果我在列表项中放置一个 <span> 并指定一个小于标准正文字体的字体大小，则 <li> 保留文档的行高，而不是 span 实际使用的内容。

需要考虑的一件事是，对于实际的 HTML，我能做的事情非常有限，因为这是由 ckeditor（所见即所得）编辑器创建的 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 规则来控制它。

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

如果您知道一种使 <li> 的行高基于其中的 <span> 高度的方法，那就太棒了。

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

4

4 回答 4

2

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

li {line-height: normal;}
于 2012-08-29T20:50:02.247 回答
2

约翰，

比利护城河有正确的想法，这样的事情会奏效：

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

span 标签与其容器元素 li 内联。将其更改为 block 会强制它位于内联元素之外，因此不在 li 行高之内。

干杯

于 2012-08-29T21:07:40.107 回答
2

最简单的事情是不要在行高中添加单位。简单地使用 1.3 将使您的行高保持成比例。

于 2012-08-29T21:18:11.333 回答
1

您想将行高减少 0.3 以使跨度使用正常的行高吗？如果是这样，您可以执行以下操作：

li {line-height: .8em;}
于 2012-08-29T21:06:29.700 回答