初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS li要素を横並びにする方法

メニューやナブに使用されるli要素を横並びにする方法を記述します。

横並びにする方法はにはfloatプロパティを使用する方法か、displayプロパティを使用する方法の2種類あります。

floatを使用する方法から記述します。 liをfloatで浮かせて左に詰めていくことで横並びに見えます。
下記に実際に記述してみます。

HTML表示

<ul>
<li><a href="#">Box 1</a></li>
<li><a href="#">Box 2</a></li>
<li><a href="#">Box 3</a></li>
<li><a href="#">Box 4</a></li>
<li><a href="#">Box 5</a></li>
</ul>

CSS表示

f:id:bellsmarket:20150126234545p:plain

ブラウザ表示

f:id:bellsmarket:20150127002710p:plain

li{ padding}でそれぞれのBoxの左側の幅を決めます。
li{ padding}でBox自体の大きさを決めています。

次にdisplayプロパティを使う方法を解説します。

li要素はブロック要素なのでそのままでは横に並びません。それをdisplayプロパティでinlineを指定し、inline要素に変換することで横に並んでいく習性を使い、横並びを実現します。
では実際に記述します。

CSS表示

f:id:bellsmarket:20150127001942p:plain

ブラウザ表示

f:id:bellsmarket:20150127002710p:plain

比べてみると記述の仕方は異なりますが、 両方とも同じ結果になる事が分かります。

結果は一緒ですがボタンのように均一な大きさで横並びにするためにはfloatを使い、リンクのa要素にdisplay:block、width,hightを指定します。 a要素だけにfloatプロパティとdisplay:block;を記述してしまうとli要素が段になってしまう事があるのでfloatプロパティはliに記述するほうがコーディングミスが減ります。

topへ戻る