11

デフォルトでは、順序付きリストは次のようになります。

ここに画像の説明を入力

リストの左側にスペースがあります。これらの間隔を削除する方法はありますか?

ここに私が欲しいものがあります:

ここに画像の説明を入力

私のウェブサイトでは、font-family と font-size はユーザーによって動的に変更されます。したがって、左パディングを事前設定することはできません。

4

5 に答える 5

13

em をスケーラブルなサイズ (固定の px サイズではなく) に使用できるはずです。これにより、フォント サイズのスケーリングが可能になりますが、パディングを適用するときにスケーリングされたサイズと一致します。

ol { padding-left: 1.8em; }

説明するjsfiddleを次に示します。bodyfont-size を別のスケーリングされたサイズ (1em、2em などを試してください) に変更するolと、左側の段落と一致することがわかります。

ブラウザによって異なるサイズでレンダリングされることがあります。1.8em は Chrome で動作しますが、Firefox または IE では 1.6em または 1.9em が必要になる場合があります。Web は流動的でスケーラブルであるため、特にユーザーがスケーラブルなフォントを使用する場合、ピクセル精度を狙うことはほとんどの場合、勝ち目のない状況です。

于 2012-06-12T05:58:44.820 に答える
13

私のウェブサイトでは、font-familyとfont-sizeはユーザーによって動的に変更されます。したがって、私はプリセットすることができませんpadding-left。

なぜそれがあなたの使用を止めるのでしょうpadding-leftか? ブラウザーのデフォルトのスタイルシートをオーバーライドしたい場合に使用するのに最適なツールです。

ul {
   padding-left: 0;
   /* If you want you can change the list type from inside or outside */
   list-style: inside decimal;
}
于 2012-06-12T03:06:51.390 に答える
6 
ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }

左側のデフォルトの間隔は、 または の左パディングまたは左マージン、olまたはliそれらの組み合わせによって引き起こされる場合があります (ブラウザーによって異なります)。したがって、特定の間隔を取得するには、好みの値に設定した 1 つを除いて、これらすべてのプロパティをゼロに設定します。この間隔は、リスト マーカー (数字) に対して十分な大きさである必要があることに注意してください。の値1.3em(つまり、フォント サイズの 1.3 倍) は、それらに適した大きさで、左側に余分なスペースをほとんどまたはまったく残さないようにする必要があります。

于 2012-06-12T04:22:59.977 に答える
2

はい、デフォルトでは 40px です。CSS を使用する:

ul {padding-left: 1.5em; list-style: decimal;}
于 2012-06-12T03:05:57.140 に答える
1

リストが親コンテナーの左側の境界線と同じ高さになるようにする場合は、独自のリストの箇条書きイメージを使用します。

次の CSS を使用して、UL をカスタマイズできます。

UL {
  margin-left: 0;
  list-style: none outside url("myImage.png");
}

お役に立てれば！:)

于 2012-06-12T03:25:22.987 に答える