リスト

表示例

ol要素 ul要素
  1. SAMPLE
  2. SAMPLE
  3. SAMPLE
  • SAMPLE
  • SAMPLE
  • SAMPLE

li要素を横並びにする

display: inline

<style type="text/css">
li {
    display: inline;
}
</style>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
  • A
  • B
  • C

要素間に隙間が空く場合

display:inlineで横並びにしたとき、ブラウザによっては要素の間にスペースが表示されます。これを防ぐには、要素の間にスペースがないようにHTMLを記述します。

<ul>
    <li>A</li><li>B</li><li>C</li>
</ul>
  • A
  • B
  • C

親要素に納まらない場合

要素の数が多いとき、それらを内包する要素からはみ出して表示されるような場合には、改行を指示するCSSword-wrap:break-wordを指定します。

ブロック要素を含む場合

ブロック要素が含まれているli要素はインラインでは表示されず、結果として横に並ばなくなります。このような場合には、次項のfloatを用いる方法で対処します。

<ul>
    <li>A</li>
    <li><div>B</div></li>
    <li>C</li>
</ul>
  • A
  • B
  • C

float: left

floatでも横に並びます。

<style type="text/css">
li {
    float: left;
}
</style>

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
  • A
  • B
  • C

このときブラウザによってはリストマークが重なって表示されるため、これを非表示にします。またfloatによって要素の大きさが考慮されなくなるため、overflowによってこれを解決します。

ul {
    list-style-type: none;
    overflow: auto;
}
  • A
  • B
  • C