CSSで縦配置を横配置に変更する方法

垂直リストを水平リストに変換するには 2 つの方法があります。インラインまたはフロート リスト項目を使用します。

どちらの方法でも問題ありませんが、リンクのサイズを同じにしたい場合は、float メソッドを使用する必要があります。

インライン リスト項目

水平ナビゲーション バーを作成する 1 つの方法は、要素

Instance

li{
    display:inline;
}

display を指定することです。 :inline; - デフォルトでは、

要素はブロック要素です。ここでは、各リスト項目の前後の改行を削除して 1 行を表示します。

フローティング リスト項目

上記の例では、リンクの幅が異なります。

すべてのリンクを同じ幅にするには、

要素をフロートにして、 要素の幅を指定します。

Example

li{
    float:left;
}
a{
    display:block;
    width:60px;
}

float:左 - フローティング ブロック要素を並べてスライドを使用します。

display:block - ブロック要素へのリンクを表示し、(テキストだけでなく) リンク領域全体をクリック可能にし、幅を指定できます

width:60px - デフォルトのブロック要素の最大幅。幅を 60 ピクセルに指定したいです

以上がCSSで縦配置を横配置に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。