ブラウザ間で順序なしリストのスパンの固定幅を実装するにはどうすればよいですか?

順序なしリスト内のスパンに固定幅を実装する

Web デザインの領域では、リスト内のスパンに固定幅を実現します。順序なしリストは難しい場合があります。以下の HTML スニペットを考えてみましょう:

<code class="html"><ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul></code>

望ましい結果は、次のように各スパンに続くテキストを縦に並べることです:

<code class="text">The lazy dog.
AND The lazy cat.
OR  The active goldfish.</code>

これを実現するには、一般的なアプローチは次のとおりです。次の CSS を適用するには:

<code class="css">span {
  display: inline-block;
  width: 50px;
}</code>

ただし、このソリューションは、特定のブラウザー、つまり Firefox 2 以前では制限に直面します。これらのブラウザは、inline-block 値を認識しません。これらのブラウザの代替オプションは、-moz-inline-box を使用することです。ただし、これは inline-block とまったく同等ではなく、特定のシナリオでは異なる動作を示す可能性があることに注意することが重要です。

すべてのブラウザ間で一貫性を確保するには、追加の CSS 調整が必要になる場合があります。そのような解決策の 1 つは次のとおりです。

<code class="css">@-moz-document url-prefix() {
  span {
    -moz-inline-box: true;
    width: 50px;
  }
}</code>

このアプローチを採用すると、インライン ブロックをネイティブにサポートしていないブラウザーでも必要な固定幅を実現できます。このシナリオでは、テキストへのパディングの追加やタグの構造の変更は許可されていないことに注意することが重要です。

以上がブラウザ間で順序なしリストのスパンの固定幅を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。