GeekBox

IT系エンジニアの雑記

li要素を横並びにする

2015/04/01

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

  • a
  • b
  • c
  • d

-----------------

-----------------

  • a
  • b
  • c
  • d

-----------------

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


<style>

li {
    display: inline;
}

</style>

<body>

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

</body>

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

-css