最近のグローバルメニューは、横並びが当たり前ですよね？
同じように要素を横に並べたくなることは多々あります。

bootstrap のような表型を実現する css ユニットも出てきていて、かなり便利ですけど、そこまでやらなくてもサクサクっと並べたい。
そんなときの要素を横に並べるときの簡単なノウハウです。

グローバルメニューのように要素を横に並べるなら ul , li を使ってみる

箇条書きの代表格といえば、 ul , ol ですが、よこに並べるべき要素は li となります。

横に並べる基本は、float:left がスタンダードなので、各 li に float:left の属性を与えます。
<ul><br /><li>line 1 </li><br /><li>line 2 </li><br /><li>line 3 </li><br /></ul><br />後続文章1<br /><br />後続文章2<br /><br /><style><br />li{<br />float:left;<br />}<br /></style><br />

あれあれ、後続文章１がおかしなところに表示されますね？
float:left が効いているからですね。

そこで、ul に class=”clearfix” をつけます。


ul , li または ol , li での横並びの基本パターンは、こうなります。
<ul class="clearfix"><br /><li>line 1 </li><br /><li>line 2 </li><br /><li>line 3 </li><br /></ul><br />後続文章1<br /><br />後続文章2<br /><br /><style><br />li{<br />float:left;<br />padding:10px;<br />list-style-type:none;<br />}<br /></style><br />

もちろん、いきなり li に属性を与えると他に影響しますから、こんな感じでここだけってしちゃいます。
<ul class="mama clearfix"><br /><li>line 1 </li><br /><li>line 2 </li><br /><li>line 3 </li><br /></ul><br /><style><br />.mama > li{<br />float:left;<br />margin:5px;<br />padding:10px;<br />list-style-type:none;<br />border:1px solid #c00;<br />}<br /></style><br />
あとは、これをコピペして使えばいいってことでんねん。

bootstrap よりも気軽に使える、オーソドックスな横並びパターンです。

２行、３行となってきたら、どっちが便利かわかりませんけどね、とりあえず楽に並べるには ul , li でOKです。



01234567891011121314151617181920