ホームページ  >  記事  >  ウェブフロントエンド  >  幅が不明な順序なしリストを中央に配置するにはどうすればよいですか?

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

DDD
DDDオリジナル
2024-11-04 02:37:29629ブラウズ

How to Center an Unordered List of Unknown Width?

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

Web デザインでは、フッターにあるリンクなどのリンクのリストを水平方向に中央揃えにすることが望ましいことがよくあります。テキストを整列させるのは簡単ですが、幅を指定せずに順序なしリストを中央揃えにするのは難しい場合があります。

質問:

幅が不明な順序なしリストを水平方向に中央揃えするにはどうすればよいですか。リスト項目を上下に表示するのではなく、並べて表示する必要がある場所はどこですか?

答え:

オプション 1: インライン表示

リスト項目を表示: インラインに設定できる場合、解決策は簡単です:

<code class="css">#footer {
  text-align: center;
}

#footer ul {
  list-style: none;
}

#footer ul li {
  display: inline;
}</code>

オプション 2: 位置指定で表示をブロック

If display: ブロックはリスト項目に使用する必要があります。次の 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>

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。