可変幅で順序なしリストを水平方向に中央揃えにする方法-CSSチュートリアル-php.cn

可変幅で順序なしリストを水平方向に中央揃えにする方法

Susan Sarandon

リリース： 2024-10-29 06:56:30

オリジナル

662 人が閲覧しました

How to Center an Unordered List Horizontally with Variable Width?

幅が不明な順序なしリストの水平方向の配置

Web サイトのフッターでは、ナビゲーション用のリンクのリストが、順序のないリスト。リストの幅に関係なく水平方向のセンタリングを保証するには、UL 要素に固定幅を設定する従来の方法は多くの場合非現実的です。

インラインリスト項目のソリューション

リスト項目はインラインで表示できます。解決策は簡単です:

<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>

ログイン後にコピー

この CSS の位置UL 要素をページの中央に配置し、その周囲に LI 要素をフローティングするように設定することで、目的の水平方向の配置を実現します。

以上が可変幅で順序なしリストを水平方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。