html - CSS set li インデント

Question

スタック オーバーフローをグーグル検索して検索しても、認識できる結果は返されませんでした。

リストを基礎として使用するドロップダウンのメインメニューがあります。問題は、リストが非常に広く、展開したときにインデントが十分でないことです。だから、これは私の問題です！CSS を使用してリストのインデント量を大きくするにはどうすればよいですか?

Answer 1

ulドロップダウンメニューをインデントするには、

/* Main Level */
ul{
  margin-left:10px;
}

/* Second Level */
ul ul{
  margin-left:15px;
}

/* Third Level */
ul ul ul{
  margin-left:20px;
}

/* and so on... */

lisと（該当する場合）as（またはお持ちのコンテンツ要素）もインデントでき、それぞれ効果が異なります。必要な効果に応じて、のpadding-left代わりに使用することもできます。margin-left

アップデート

デフォルトでは、多くのブラウザpadding-leftが最初のインデントを設定するために使用します。それを取り除きたい場合は、padding-left: 0px;

それでも、margin-leftとpadding-left設定の両方がさまざまな方法でリストのインデントに影響を与えます。具体的 margin-leftには、要素の境界線の外側のインデントに影響padding-leftを与えますが、要素の境界線の内側の間隔に影響を与えます。（CSSボックスモデルの詳細については、こちらをご覧ください）

設定padding-left: 0;すると、liの箇条書きアイコンが要素の境界線の端にぶら下がったままになります（少なくともChromeでは）。これは、希望するものである場合とそうでない場合があります。

padding-leftとmargin-leftの例、およびそれらがulでどのように連携できるか：https ：//jsfiddle.net/daCrosby/bb7kj8cr/1/

Answer 2

li{
    margin-left:50px;
}

または 50px を必要なものに置き換えます。