ulタグで横並びのメニューを作る - CSS Tips - 仮想空間

主要ページへのリンク

ホーム

インターネット

趣味と娯楽

メモ

犬と猫がいる生活

ulタグで横並びのメニューを作る

ulタグはリスト（箇条書き）を定義するタグで、メニューリンク（ナビゲーションリンク）にも使われます。しかし、横並びのメニューにしたい場合には、CSSによる設定が不可欠となります。

今回は、ulタグで横並びメニューを作る、最も簡単な方法を紹介します。

<ul>
<li><a href="#">インターネット関連</a></li>
<li><a href="#">趣味と娯楽</a></li>
<li><a href="#">考察メモ</a></li>
<li><a href="#">犬と猫がいる生活</a></li>
</ul>

ul{
margin:0px;
padding:0px;
list-style:none;
}
 
li{
padding:0em 0.5em;
display:inline;
}

liタグは本来ブロックレベル要素なので、<li>~</li>の後は改行されます。
そこで、display:inline;を設定し、インラインレベル要素に変換することで、改行されなくなります。

そのままでは文字が詰まって表示されてしまうので、paddingで左右を0.5文字分を設定し、約1文字分の余白を作ります。

*印が付いた項目は入力必須です。

※Typekey（認証サービス）を利用しないで投稿されたコメントは承認されるまで表示されません。

※受け付けたトラックバックは承認されるまで表示されません。