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