2

リスト項目の行の高さに問題があります。

簡単に言うと、body に割り当てられた line-height があり、これは <li> が明らかに継承しています。

リスト アイテム内に <span> を配置し、標準の本文フォントよりも小さいフォント サイズを指定すると、 <li> はスパンが実際に使用しているものではなく、ドキュメントの行の高さを保持します。

考慮すべきことの 1 つは、実際の 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 ルールを使用して制御することはできます。

問題を説明する jsfiddle を作成しました: http://jsfiddle.net/virtualpromote/pW47c/

その中の <span> の高さに基づいて行の高さを <li> にする方法を知っていれば、それは素晴らしいことです。

-- Javascipt は、この問題を解決するオプションではありません。生成された HTML は、実際にその場で PDF を作成するアプリに渡されるため、もちろん、事後に適用できる JavaScript ルールを解析することはできません。

4

4 に答える 4

2

ジョン、

Billy Moat は正しいアイデアを持っています。次のようなものがうまくいきます。

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

span タグは、そのコンテナ要素である li とインラインになります。これをブロックに変更すると、インライン要素の外側に強制されるため、li line-height の内側にはなりません。

乾杯

于 2012-08-29T21:07:40.107 に答える
2

リスト要素の行の高さを通常に設定してみましたか?

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

最も簡単なことは、行の高さに単位を追加しないことです。単純に 1.3 を使用すると、行の高さが比例して維持されます。

于 2012-08-29T21:18:11.333 に答える
1

スパンが通常の行の高さを使用するように、行の高さを 0.3 減らしますか? その場合、次のことができます。

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