CSSで幅が不明な順序なしリストを中央に配置するにはどうすればよいですか?

幅が不明な順序なしリストを中央に配置する

Web デザインでは、ナビゲーションを容易にするためにフッターにリンクの順序なしリストを配置するのが一般的です。ただし、リストの幅が不明な場合は、リスト項目を水平方向に中央揃えするのが難しい場合があります。

項目をインラインで表示できるリストの解決策の 1 つは次のとおりです。

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

これにより、テキストの中央揃えがフッターに適用され、デフォルトのリスト スタイルが削除され、リスト項目がインライン要素として表示されるように設定されます。

ただし、リスト項目をブロックとして表示する必要がある場合は、次の CSS コードを使用します。使用できます:

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>

この方法では、フッターを全幅に設定し、オーバーフローを非表示にします。順序なしリストは絶対位置に配置され、左にフローティングされてから、50% 左にシフトされます。リスト項目も絶対位置に配置され、左にフローティングされ、右に 50% シフトされます。これにより、幅に関係なく、順序なしリストが効果的に水平方向に中央揃えになります。

以上がCSSで幅が不明な順序なしリストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。