CSS を使用してスパン要素の幅を修正し、順序なしリスト内のテキストを配置する方法

CSS 固定幅スパン配置

CSS でよくあるジレンマは、span 要素内のテキストの幅を固定しようとするとき、特に次の場合に発生します。順序なしリストに埋め込まれます。目標は、スパンの後にテキストを配置して、よりきれいな視覚的なプレゼンテーションを作成することです。

これを達成するには、単純な CSS ソリューションで、span 要素に次のプロパティを割り当てる必要があります。

span {
  display: inline-block;
  width: 50px;
}

このアプローチでは、display: inline-block プロパティを活用し、スパンがインライン要素とブロック要素の両方のように動作するように指示します。幅を 50 ピクセルに指定すると、その内容に関係なく、スパンの幅が固定されます。

このソリューションはほとんどの最新ブラウザで効果的に機能しますが、Firefox 2 以前のバージョンでは inline-block プロパティがサポートされていません。このような場合、代わりに -moz-inline-box プロパティを使用できます。ただし、-moz-inline-box は inline-block とは若干異なる動作をし、すべての状況で一貫してレンダリングされるわけではないことに注意することが重要です。

以上がCSS を使用してスパン要素の幅を修正し、順序なしリスト内のテキストを配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。