liの横並び

Question

お世話になっております。

今、カテゴリページの作成途中ですが、リストがうまく横並びになりません。
2段に分かれてしまいます。
http://item.rakuten.co.jp/morinoen95/c/0000000288/

どのようにすればよいでしょうか。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞リストがうまく横並びになりません。
＞2段に分かれてしまいます。
「定番ギフト」「お供え物」「夏季限定」の部分ですね。
リストが2段に分かれるのは、
リストの内容（タグ）全体の横幅が、大枠（タグ）の内側の幅を
超えていることが原因です。

内容全体の横幅を抑えるために、下記の対応をお願いします。

Google Chromeで確認したところ、
ulタグにタグ本来のスタイルとして、左余白が40ピクセル設定されておりました。
不要な場合は、「margin:0;」属性を追加して無効化してください。

また、全てのタグに対し、左右に余白が付くようになっておりますが、
2番目以降のタグにだけ左余白を設定すると、
無駄なく余白を設定することができます。

現在の、


（省略）
（省略）
（省略）


という構造をそのまま使うのであれば、
「.list」にだけmargin-left属性を設定する方法もありますが、

たとえば


（省略）
（省略）
（省略）


上記HTMLソースのように、ulタグにだけクラスを付けていただき、

ul.catbtn { padding:0; } /* ulタグ内の余白を削除する */
ul.catbtn li { display: inline-block;margin-left: 32px; } /* liタグを全てinline-blockにし、左余白を設定する */
ul.catbtn li:first-child { margin-left: 0px; } /* 1つ目のliタグの左余白を削除する */

上記のようなスタイルシートを適用していただきますと、
最初のタグだけ違うクラスをつける必要がなく、
ボタンの追加・削除・入替えの際に
クラスをどう名付けるか考える必要がなくなります。
ぜひお試しください。

Answer

田中様


ご丁寧にありがとうございます。
大変分かりやすく、解決いたしました。
ありがとうございました。