質問: スタイルシートでデザイン 現在スタイルシートを使ってホームページを作成中の者です。 しかしそのデザインがうまくいかず困っております。 文字が中央に打ってある長方形の赤枠があります。 間20pxくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。 marginとpaddingでpxを指定しているのですが両者の枠が平行にならず 片方の枠が下の方に下がってしまいます。 視覚化するとこんな感じにしたいのですが ーーーーーー ーーーーーー | 映画 | | 小説 | ーーーーーー ーーーーーー いつも ーーーーーー | 映画 | ーーーーーー ーーーーーー | | ーーーーーー とこんな感じに片方の枠が下の方にずれてしまいます。 指定の仕方に問題があると思うのですが、 何分初心者なもんでよく分かりません。 marginは右枠40px550px150px30px 左枠10px550px150px30px にしています。 上をそろえさえすれば両枠平行になるだろうと思っていたのですが 全くなりません。ずれるばかりです。 わかりにくい説明でふがいないですが どなたかお分かりの方おられればよろしくお願いします!
回答: [映画]と[小説]の間が折り返されているのかも知れません。 [映画]と[小説]を折り返さずに表示できる領域を指定しておけばいいかも知れません。 下の例ではでこの領域の幅をwidth: 700px と十分大きく取っています。 div.menu { width: 700px; } div.menu span.item { display: inline-block; border: solid 1px red; padding: 4px; width: 80px; text-align: center; } /* 上 右 下 左 */ span#movie { margin: 10px 150px 30px 150px; } span#novel { margin: 10px 50px 30px 150px; } 映画 小説