LemonteaのUnity部屋

C#とかのお話です~

CSS リストの要素を横並びにする float

こんにちは。レモンティーです。

今回はリストの要素を横向きに並べます。
使うのはfloatです。

  • あああ
  • いいい
  • ううう
  • えええ


こんな感じですね。
html

<ul class="testlist">
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
    <li>えええ</li>
</ul>

css

.testlist li{
    float:left;
    margin:15px;
}


なおfloatを使うと回り込みという現象が起こります。
これはfloatを設定した要素に他の要素が回り込んで表示が崩れる現象で、
↓の画像の場合、「こんな感じですね。」の文字が回り込んでいます。


f:id:sawalemontea:20180514184226p:plain


その場合は、回りこませたくない要素のcss
clearを設定すれば回避できます。

今回の場合、clear:left;でOKです。


今回はこれでおしまいです。
www.sawalemontea.com
www.sawalemontea.com
www.sawalemontea.com