忘れないように

エレメントを横並び表示したい場合の方法を調べた。とりあえずググると

• http://wp.mersy.jp/?p=71

ってな事がかかれている。ふむふむ。とりあえず

li{ display: inline;}

ってな指定をしてみると、確かに横並び。おもしろいねぇ。

#hlist{display:inline;}

#flist{float:left;}

と二つ用意して

<ul>

  <li id="hlist"> 1 </li>

  <li id="hlist"> 2 </li>

  <li id="hlist"> 3 </li>

  <li> 4 </li>

  <li id="flist"> 5 </li>

  <li id="flist"> 6 </li>

  <li id="flist"> 7 </li>

  <li> 8 </li>

</ul>

ってな表示をさせてみると、違いが分かります。なるほど。Chromeでみると、４は改行されて、でも８は改行されずに変なところに出ますね。display:inline;のほうが使い勝手は良さそうです。