隣接するHTMLリスト間の新しいラインを避けますか?
-
09-10-2019 - |
質問
短縮版:
2つのリストが互いに隣接している場合、2つのリストの間に新しいラインが追加されるのを防ぐためのCSS(または他の手段による)には方法がありますか?
ロングバージョン(コード付き):
ミックスのネストされたリストをインテリジェントに処理していないマシンで生成されたHTMLがあります <ol>
と <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であることを願っています。
ありがとう!
解決
目に見える唯一の問題がリスト間の空白行である場合、単に次のようにしてください。
ol, ul {
margin-top: 0;
margin-bottom: 0;
}
所属していません StackOverflow