【CSS】要素を横に並べる

liやdivを横に並べる方法。

対象のhtml

<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>

<div class='after'>after</div>

floatを使う方法

floatして、clearで回り込みを消す。

css

.box{
 float: left;
 width: 200px;
}
.after{
 clear:both;
}

inline-blockを使う方法

css

.box{
 display: inline-block;
 width: 200px;
}

参考：inline-blockで作るレイアウト