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

今回は、主にリスト構造を利用して、水平方向のナビゲーション構造を設定する方法を2つご紹介します。

方法1 ブロック構造とインライン構造の組み合わせ。

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

(1) ブロック構造は、行の高さ、幅、高さ、マージン、パディング、ボーダーなどの属性を設定することができます。インライン要素は、行の高さ、左右のマージンのみ設定可能で、外側のマージン、上下の内側のマージン、ボーダーなどの属性は設定できない。

(2)ブロック構造がより優位で、他の要素と行を共有することはない。インライン要素は他の要素の中に入れ子にすることができる。

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

しかし、この2つを組み合わせて、ブロック構造にインライン要素の特徴を持たせたり、インライン要素にブロック要素の特徴を持たせたりすることがあります。インライン要素にブロック要素の特性を持たせる例：aタグはインラインタグの中でも重要なタグであり、ユーザーはその指定するリンクに基づいて該当するページにアクセスすることができます。aタグの下にある要素をより美しく動作させるために、このリンクにボーダー、マージン、背景色などのプロパティを設定したいと思います。これらの属性はブロック構造でしか利用できないことがわかっているので、リンクの内容を保持するためにインラインタグaを引き続き使用しますが、インライン要素にブロック構造に関連する属性を持たせたいと思います。

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

同様に、リストで水平方向のナビゲーションを設定する場合、リストの各行を同じ行に表示させたいのですが、これはブロック構造とインライン構造を組み合わせることで実現できます。

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

方法2 floatプロパティを使用して設定する。

プロパティfloatは、左と右を含む2つの方向に設定することができます。水平方向のナビゲーションを設定し、我々はフロートを設定したいので、左側にフロート、左から右へのナビゲーションの順序は、ナビゲーション1からナビゲーション4、より多くのユーザーの習慣に沿ったもので左から右へ、すなわち、横切って配置されているリストをフロートすることである。

コード

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

元記事はこちら http://www.cnblogs.com/xiaoqqmin/p/5317551.html