1

短縮版：

2 つのリストが隣接している場合、CSS を使用して (または他の手段で)、2 つのリストの間に新しい行が追加されないようにする方法はありますか?

長いバージョン (コード付き):

<ol>要素と要素が混在するネストされたリストをインテリジェントに処理していない機械生成の HTML があり<ul>ます。(これがOracle UCM Dynamic Converterであると推測した場合、賞品を獲得できます。)

具体的には、ソース ドキュメントが順序付きリストと順序なしリストをネストする場合、生成された HTML はすべての順序付きリスト タグをトップ レベルに戻し、複数の順序なしリスト タグを使用して新しい順序なしリストを開始し、目的のレベルのインデントを取得します。

これらはブロック要素であるため、ブラウザはリスト間に不要な改行を入れてレンダリングします。HTML を直接制御できれば、これは簡単ですが、残念です。CSS は実行可能であると信じていますが、CSS の知識が比較的乏しいので失敗しています。（要素を単純に使用style="display: inline;"しても<ul>うまくいきませんでした。）

抽象化され、私は得ています：

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 
</ol></ol>

<ul><ul><ul><li>bullet, indent level3<li> 
            <li>bullet, indent level3<li>
</ul></ul></ul>

うまくいけば、次のようにレンダリングされたバージョンにする方法があります。

<ol><li>item 1</li> 
    <li>item 2</li> 
    <ol><li>item 1, indent level 2</li> 
        <li>item 2, indent level 2</li> 

<ul><li>bullet, indent level3<li> 
    <li>bullet, indent level3<li>
</ul></ol></ol>

これが簡単な CSS であることを願っています。

ありがとう！

4

1 に答える 1

2

目に見える唯一の問題がリスト間の空白行である場合は、次のように単純にします。

ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}
于 2010-10-18T21:59:12.990 に答える