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等でイベントに合わせて動きなどを付けるとシンプルなメニューとかが簡単に実装できる。