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; }