GeekBox

IT系エンジニアの雑記

li要素を横並びにする

スポンサーリンク

こののようなリスト要素を横並びに。

  • a
  • b
  • c
  • d

  • a
  • b
  • c
  • d

li要素にdisplay: inline;を指定してあげるだけで出来る。

[html]

<style>

li { display: inline; }

</style>

<body>

<ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul>

</body> [/html]

さらにjQuery等でイベントに合わせて動きなどを付けるとシンプルなメニューとかが簡単に実装できる。