CSSで順序なしリストを水平方向に表示するにはどうすればよいですか?

の作り方水平行で表示

CSS では、通常、リスト項目はブロック要素として表示されます。つまり、コンテナーの全幅にまたがります。ただし、リスト項目を水平方向に一列に表示したい場合があります。これを実現するには、次の手順に従います。

1.表示を実装します: インライン。リスト項目

リスト項目をインラインで表示するには、表示を inline; に適用する必要があります。彼らの財産です。ただし、このプロパティを

に直接適用すると、要素は何の効果もありません。代わりに、コンテキスト セレクターを使用して、
:

#ul_top_hypers li {
    display: inline;
}

ログイン後にコピー

2 内のリスト項目をターゲットにします。親コンテナの調整 (オプション)

提供されたコードでは、親コンテナ (#div_top_hypers) にも display: inline; が含まれています。適用済み。これはリスト項目の水平表示には必要ありませんが、場合によっては不要な動作を防ぐことができます。

例

次のコード スニペットは、これらの実装を示しています。手順:

#div_top_hypers {
    background-color:#eeeeee;
}

#ul_top_hypers li {
    display: inline;
}

ログイン後にコピー

<div>

ログイン後にコピー

これらの手順に従うと、次のコマンドを使用してリスト項目を横一列に簡単に表示できます。 CSS。

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