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
}