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

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。

このメソッドは、ブロック構造とインライン構造を組み合わせます。

ここではまず、ブロック要素とインライン構造の違いを紹介します。

（１）ブロック構造は、行の高さ、幅（幅、高さ）、余白（余白、パディング）、境界線などの属性を設定できます。インライン要素では、行の高さ、左右の余白のみを設定できますが、余白、上下のパディング、境界線などの属性はありません。

（２）ブロック構造がより優勢となり、他の要素と行を共有しない。インライン要素は他の要素内にネストできます。

一般的なブロック要素には、ul、ol、p、form などがあります。一般的なインライン要素には、meta、img、span、h1-h6、label などがあります。

しかし、ブロック構造にインライン要素の特性を持たせたり、インライン要素にブロック要素の特性を持たせたりするために、この 2 つを組み合わせることもあります。インライン要素にブロック要素の特性を持たせる例を見てみましょう。a タグは最も重要なインライン タグの 1 つです。ユーザーは、指定されたリンクに従って対応するページにアクセスできます。 a タグの下の要素をより美しくするために、境界線、余白、背景色など、このリンクにいくつかの属性を設定します。これらの属性はブロック構造でのみ使用できることがわかっているため、現時点ではインライン タグ a を引き続き使用してリンク コンテンツを収容しますが、このインライン要素にもブロック構造の関連属性を持たせることができることを期待しています。

この問題は、「a{display:block}」を設定することで解決できます。

同様に、リストを使用して水平ナビゲーションを設定する目的を達成したい場合、リストの各行を同じ行に表示できることが期待されます。このとき、ブロック構造とインライン構造を組み合わせることで、この目的を達成することもできます。

リストに 1 行のコードを追加するだけです: list{display:inline;}

方法 2 では float 属性設定を使用します。

float 属性は、左と右の 2 つの方向にフロートするように設定できます。水平ナビゲーションを設定するには、リストを左に水平にフロートします。フロートを設定した後、ナビゲーションの順序が左から右に水平になり、つまり左から右にナビゲーション 1 からナビゲーション 4 になり、より多くのユーザーの習慣に一致することを期待するため、左にフロートします。

コード：

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。

原文: http://www.cnblogs.com/xiaoqqmin/p/5317551.html