幅が不明な順序なしリストを水平方向に中央揃えにするにはどうすればよいですか?-CSSチュートリアル-php.cn

幅が不明な順序なしリストを水平方向に中央揃えにするにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-29 07:50:30

オリジナル

742 人が閲覧しました

How to Horizontally Center an Unordered List with Unknown Width?

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

Web サイトのフッターでは、リンクのリストが水平方向に中央揃えになるのが一般的です。固定幅のリストを中央に配置するのは簡単ですが、幅が不明なリストを中央に配置するのは困難です。この記事では、このシナリオの解決策を検討します。

問題

次の HTML コードを考えてみましょう。

<code class="HTML"><div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div></code>

ログイン後にコピー

#footer div 内のコンテンツ全体を次のようにしたいとします。水平方向の中央揃え。段落タグに text-align: center を設定すると機能しますが、リスト項目は互いの下ではなく横に並べる必要があるため、ここでは適用できません。

解決策

解決策インライン項目を含むリスト:

リスト項目をインラインで表示できる場合は、次の CSS で十分です:

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

#footer ul {
    list-style: none;
}

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

ログイン後にコピー

ブロック項目を含むリストの解決策:

リスト項目に 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>

ログイン後にコピー

このソリューションでは、float プロパティと left プロパティと right プロパティを利用してリストの位置を調整します。リストの幅が不明であっても、水平方向の中央揃えが保証されます。

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