横並びメニューの作成
横並びメニューは、縦並びのとき同様にリストとaタグを使用します。
中身を作成する前に、まずはナビ全体をデザインの幅（960px）に揃えましょう。やることは前のページのロゴやメイン画像のときと同じです。
しかし、今回は.box-inを使いまわさず、liを囲っているulタグに.box-inと同じ役割をさせましょう。
style.css
2 | background:rgb(25%,25%,25%); |
ナビ全体を囲う#navは、グレーの背景で画面いっぱいに、その中の各liタグを囲うulタグは、幅固定＋センター揃えを適用しました。
ボタンのデザイン
縦並びメニューのとき同様に、#navの中のliの中のaタグに以下のスタイルを適用します。
style.css
03 | background:rgb(20%,60%,80%); |
05 | padding:10px 0 10px 0; |
07 | color:rgb(100%,100%,100%); |
12 | background:rgb(15%,45%,60%); |
ポイントは幅を固定してdisplayをblockにすることです。
（横並びメニューの場合、横幅を必ず指定しましょう）
見本ページを新しいタブで開く
横に並べる
ボタンを横並びにするには、それぞれのボタンを囲うliタグにfloatを適用します。
floatは、全てをfloat:left;ととしてもしっかり横に並びます。
style.css
ポイントは、「#nav li a」ではなく、「#nav li」にfloat:left;をつけることです。
また、ボタン同士の余白も「#nav li」につけましょう。
（隣接している要素はあくまでもボタンを囲うliタグだからです）
回り込みの解除
floatを指定したので必ず回り込みの解除を行いましょう。
style.css
今回、以下のhtmlは最初に入力済みですが、どこに.clearが入っているのかしっかり確認しておきましょう。
index.html
03 | <li><a href="">ホーム</a></li> |
04 | <li><a href="">大学案内</a></li> |
05 | <li><a href="">学部・学科</a></li> |
06 | <li><a href="">大学院</a></li> |
07 | <li><a href="">国際交流</a></li> |
08 | <li><a href="">入試情報</a></li> |
09 | <div class="clear"></div> |
floatがついているのはliタグなので、それらのすぐ後に挿入する必要があります。
（</ul>のそとに出てはいけません）
ちゃんと横に並びましたか？
見本ページを新しいタブで開く
もし上のように並んでない場合、ul内の要素の合計が横幅960pxを超えている可能性があります。
見本は、（ボタン159px＋liのmargin右に1px）×6個＝合計960px
と、960pxピッタリになっています。
つまり、ulやliやaタグに1pxでもpaddingやborderが指定されていたら960pxを超えるので、横には並ばなくなります。
（もし、borderやpaddingを入れたい場合は、計算してその分aタグの159pxを小さくしましょう）
