CSSで水平ナビゲーションを設定する方法

ナビゲーション バー

ナビゲーション バーを上手に使用することは、どの Web サイトにとっても非常に重要です。

CSS を使用すると、退屈な HTML メニューの代わりに美しいナビゲーション バーに変換できます。

ナビゲーション バー = リンク リスト

標準 HTML の基礎として、ナビゲーション バーが必要です。

ナビゲーション バーは基本的にリンクのリストであるため、ff6d136ddc5fdfeffaf53ff6ee95f185 要素と 25edfb22a4f469ecb59f1190150159c6 要素を使用することは非常に意味があります:

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

## 水平ナビゲーション バーを作成するには 2 つの方法があります。インラインまたはフロート リスト項目を使用します。

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

インライン リスト項目

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

Instance

li{
    display:inline;
}

display を指定することです。 :inline; - デフォルトでは、25edfb22a4f469ecb59f1190150159c6 要素はブロック要素です。ここでは、各リスト項目の前後の改行を削除して 1 行を表示します。

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

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

すべてのリンクを同じ幅にするには、25edfb22a4f469ecb59f1190150159c6 要素をフロートにして、3499910bf9dac5ae3c52d5ede7383485 要素の幅を指定します。

Example

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

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

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

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

以上がCSSで水平ナビゲーションを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。