liとCSSによる横並びカテゴリの作製

これ以外のブログにてレイアウトいじって横並びのカテゴリを作ったのでメモ。

単純にli要素をブロックにしてfloatさせただけです。要素の幅は（100/項目の数）％にします。

HTML
<ul>
<li class="category"><a href="url-to-category1">category1</a></li>
<li class="category"><a href="url-to-category2">category2</a></li>
<li class="category"><a href="url-to-category3">category3</a></li>
<li class="category"><a href="url-to-category4">category4</a></li>
<li class="category"><a href="url-to-category5">category5</a></li>
</ul>

CSS

.category {
   display : block;
   width:20%;
   text-align:center;
   float : left; 
 }