前提・実現したいこと
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で作成しています。)
<div class ="menu"> <hr class="gold_line"/> <div class ="select"> <li><a href=""><img src="HOME_Logo.png"></a></li> <li><a href=""><img src="About_Logo.png"></a></li> <li><a href=""><img src="Contact_Logo.png"></a></li> <li><a href=""><img src="JoinUs_Logo.png"></a></li> <li><a href=""><img src="Gallery_Logo.png"></a></li> </div> </div> <hr class="gold_line"/>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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/09 08:45
2020/01/09 08:53
2020/01/09 09:00