| ol要素 | ul要素 |
|---|---|
|
|
<style type="text/css">
li {
display: inline;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
display:inlineで横並びにしたとき、ブラウザによっては要素の間にスペースが表示されます。これを防ぐには、要素の間にスペースがないようにHTMLを記述します。
<ul>
<li>A</li><li>B</li><li>C</li>
</ul>
要素の数が多いとき、それらを内包する要素からはみ出して表示されるような場合には、改行を指示するCSSでword-wrap:break-wordを指定します。
ブロック要素が含まれているli要素はインラインでは表示されず、結果として横に並ばなくなります。このような場合には、次項のfloatを用いる方法で対処します。
<ul>
<li>A</li>
<li><div>B</div></li>
<li>C</li>
</ul>
floatでも横に並びます。
<style type="text/css">
li {
float: left;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
このときブラウザによってはリストマークが重なって表示されるため、これを非表示にします。またfloatによって要素の大きさが考慮されなくなるため、overflowによってこれを解決します。
ul {
list-style-type: none;
overflow: auto;
}