HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

グローバルメニューのように要素を横に並べる。


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

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


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

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

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

  • line 1
  • line 2
  • line 3
後続文章1
後続文章2

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

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

  • line 1
  • line 2
  • line 3
後続文章1
後続文章2

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


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

  • line 1
  • line 2
  • line 3
あとは、これをコピペして使えばいいってことでんねん。

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

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



<?php
for($i=0;$i<21;$i++){
echo '‘.$i.’‘;
}
?>




スポンサーリンク

スポンサーリンク

カテゴリー