質問: ### 前提・実現したいこと 960px 幅でイメージソースを用いて作成したMenuの上下を100%の水平線で挟んで表示させることは可能ですか? 例えば、下記のサイトのように、メニュー自体に色をつけることはできますが、このメニューの色を変えずにメニューの上下に水平線をいれたいです。 http://sakichin.com/chapter03/chapter03_step01_03.html イメージを使わないで下記のようなHTMLのリストのみでメニュー作成した場合はhrタグでメニューを挟むだけで、想定通りに表示されています。 Homeム About this site Contact JoinUs Gallery ### 発生している問題・エラーメッセージ hrで水平線を引くと、メニューの上の部分は想定どおり表示されますが、メニュー下にhrを設定すると、メニュー画面の最後のイメージ(Gallery)の後ろから水平線が始まり、幅が100%になりません。 で改行すると、一応は下も100%で表示されるようになりましたが、余計なスペースがはいってしまい見た目が良くないです。 ### 該当のソースコード HTML:(メニューの字は192px幅でイメージを作成し、5つで960px幅で丁度収まるように作成しています。高さは100pxで作成しています。) CSS: .menu{ width:100%; height:100px; } .select{ margin:0 auto; padding:0px; width:960px; } .select li{ float:left; list-style-type:none; font-size: 20px; } .gold_line{ border-color:gold; border-width:0.5px; margin:0; padding:0; } ### 試したこと 2つ目のhrの前にを入れると、一応は100%水平線で挟まれるようになりましたが、余計なスペースが入ってしまい。想定の見た目になりません。 ### 補足情報 説明がわかりにくいかもしれませんが、よろしくお願いいたします。 説明が不十分な点はご指摘頂けましたら助かります。
回答: `hr` は削除して、`border-top` `border-bottom` に色を付けるのが簡単でしょう。 ``` .menu{ width:100%; height:100px; border-top: 1px solid gold; border-bottom: 1px solid gold; } ```