display:***;
display:***;は要素の表示形式をどう扱うかを指定するプロパティです。
設定できる値は非常に多くあるのですが、よく使われる一部の値をご紹介します。
none | その要素は表示されません。ソース上は存在しますが、見た目としてないものとして処理されます。 |
---|---|
inline | 要素をインラインレベル要素にします。 |
block | 要素をブロックレベル要素にします。 |
inline-block | 要素そのものはインラインレベル要素とし、要素の中身はブロックレベル要素とします。 |
list-item | 要素をリスト要素とします。この値が指定された要素はリストマーカーも同時に生成されます。li要素と同じふるまいです。 |
特にinline、block、inline-blockはよく使用される値です。
サイトのグローバルナビゲーションではリストがよく使われていますが、li要素はブロック要素なので、通常は縦にリストが並びます。
横並びにするためには、listをインラインレベル要素に変換する必要があります。
▼CSS
li{
display: inline;
}
▼HTML
<ul>
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
</ul>
▼通常表示
- リストA
- リストB
- リストC
▼CSS反映後の表示
- リストA
- リストB
- リストC
リスト同士の間隔を開けたい場合は、marginを設定すると良いでしょう。
▼CSS
li{
display: inline;
margin:10px
}