CSS で箇条書きとリスト項目間の間隔を制御するにはどうすればよいですか?

Bullet と

の間のスペースを制御します。 CSS 内

Web デザインでは、箇条書きとそれに対応する

の間の間隔をカスタマイズすることが望ましいことがよくあります。順序付きリスト (

) または順序なしリスト (

) 内の要素。この記事では、CSS を使用してこれを実現する方法を徹底的に説明します。

課題は、箇条書きと

• の間の水平方向のスペースを調整できるかどうかにあります。文章。従来、CSS には、質問で述べたようなリソースで説明されているように、テキストのブロック全体を左または右に移動するオプションが用意されています。

  ただし、より効果的な解決策は、リスト項目のテキストを で囲むことです。スパン要素を作成し、それに相対位置を適用します。これにより、箇条書きとテキストの間のスペースを正確に制御できます。

  CSS コード:

li span {
  position: relative;
  left: -10px;
}

HTML 例:

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

スパンの左側のプロパティを調整することで、箇条書きとリストの間に希望の間隔を簡単に設定できますアイテムのテキスト。このアプローチにより、リストのレイアウトの柔軟性と制御が向上します。

以上がCSS で箇条書きとリスト項目間の間隔を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。