960px 幅でイメージソースを用いて作成したMenuの上下を100％の水平線で挟んで表示させることは可能ですか？

前提・実現したいこと

例えば、下記のサイトのように、メニュー自体に色をつけることはできますが、このメニューの色を変えずにメニューの上下に水平線をいれたいです。
http://sakichin.com/chapter03/chapter03_step01_03.html

イメージを使わないで下記のようなHTMLのリストのみでメニュー作成した場合はhrタグでメニューを挟むだけで、想定通りに表示されています。

<div class ="select"> <li><a href="homepage.html">Homeム</a></li> <li><a href="page/About_This_Site.html">About this site</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="JoinUs.html">JoinUs</a></li> <li><a href="Gallery.html">Gallery</a></li>

発生している問題・エラーメッセージ

hrで水平線を引くと、メニューの上の部分は想定どおり表示されますが、メニュー下にhrを設定すると、メニュー画面の最後のイメージ（Gallery）の後ろから水平線が始まり、幅が100％になりません。

<br>で改行すると、一応は下も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の前に<br>を入れると、一応は100％水平線で挟まれるようになりましたが、余計なスペースが入ってしまい。想定の見た目になりません。

補足情報

説明がわかりにくいかもしれませんが、よろしくお願いいたします。
説明が不十分な点はご指摘頂けましたら助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

hr は削除して、border-top border-bottom に色を付けるのが簡単でしょう。

css
1.menu{
2  width:100%;
3  height:100px;  
4  border-top: 1px solid gold;
5  border-bottom: 1px solid gold;
6}

投稿2020/01/09 05:41

hatena19

総合スコア33715

ft_ft

2020/01/09 08:45

ありがとうございます！完全に解決できました！！そして自分の頭の固さに落ち込みますね。 2日くらい悩んでたのですが、質問して良かったです。

hatena19

2020/01/09 08:53

ついでなので補足しておくと、 float:left; で横並びにするのはもう古い手法です。今回のように後の要素に影響を与えるのでCSSが複雑になりがちです。 flexboxで横並びにすると後に影響を与えないし、いろいろ融通がきいてCSSがシンプルになります。今回の場合は、select に display: flex; を設定すれば横並びになり、hr も幅100%になります。

ft_ft

2020/01/09 09:00

float: leftは古いのですね！勉強中なので、いろんなサイトからのコードを切り貼りしており、FloatとFlexboxが混在したりしていました。これからはflexboxに統一して作成してみます。丁寧にいろいろありがとうございます！！！

行動規範の内容に同意します