CSSを使って「リスト項目を横方向に表示するには？」

<ul> の作り方水平行で表示

HTML では、リスト項目は通常、ブロック要素として表示されます。つまり、リスト項目は上下に重なって表示されます。ただし、CSS を使用してリスト項目の表示プロパティをインラインに変更すると、同じ行に並べて表示されます。

リスト項目の表示プロパティを変更するには、次のことができます。次の CSS ルールを使用します。

li {
    display: inline;
}

コンテキスト セレクターを使用して、インライン表示プロパティを適用して、特定の <ul> 内の項目をリストすることもできます。

#ul-id li {
    display: inline;
}

ここでは、インライン表示プロパティを使用して <ul> を作成する方法の例を示します。水平方向の行に表示します:

<ul>

#ul-id {
    display: inline;
}

#ul-id li {
    display: inline;
}

このコードは次の出力になります:

Item 1 Item 2 Item 3

ご覧のとおり、リスト項目は水平方向に表示されます。行。

以上がCSSを使って「リスト項目を横方向に表示するには？」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。