質問: liの横並び お世話になっております。今、カテゴリページの作成途中ですが、リストがうまく横並びになりません。2段に分かれてしまいます。http://item.rakuten.co.jp/morinoen95/c/0000000288/どのようにすればよいでしょうか。よろしくお願いいたします。
回答: 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タグの左余白を削除する */上記のようなスタイルシートを適用していただきますと、最初のタグだけ違うクラスをつける必要がなく、ボタンの追加・削除・入替えの際にクラスをどう名付けるか考える必要がなくなります。ぜひお試しください。