CSS小技
リストを１行に表示する。
最近のWebデザイナー等はナビゲーション等でよく使用しています。
うわさでは普通のリンクよりはＳＥＯ効果があると言われるのが理由なようです。
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
フロートで左寄せクラスを作成する
.navA { float: left }
作成したクラスをli 属性に指定する
<li class="navA">項目１</li>
これで１行に表示されました。
このままでは、リストのマーカが有りますので、マーカを消す指定をクラスに追加します。
.navB { float: left;list-style-type:none;}
次に項目間のスペースを広げます
.navC { float: left;list-style-type:none;margin:5px; }
同じ表現は以下の設定でも可能です。
.navD {display: inline;list-style-type:none;margin:5px;}
コンテンツ
広告