Web サイトのナビゲーション メニューを設計しています。
メニューの角は丸くする必要があります。これは「border-radius」を使用して行いました。
幅を 800px に設定しました。幅を削除するか width: auto を設定すると、幅は 100% になります。
ナビゲーション メニューの最初のボタンの前と最後のボタンの後にギャップがあり、曲線のエッジを失わずにこのギャップを取り除く必要があります。
最初と最後のボタンの外側の角を丸く保ち、ナビゲーションの両側の隙間をなくすにはどうすればよいですか。
CSS:
/* CSS MENU */
#menu {
/* DISPLAY SETTINGS */
text-align: center;
height: 40px;
width: 800px;
margin: 0;
padding: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/* APPEARANCE SETTINGS */
border-top: 2px solid #356AA0;
border-left: 2px solid #356AA0;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #628ddb;
/* FONT SETTINGS */
color: #15387a;
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
/* LIST SETTINGS */
#menu li {
display: inline-block;
}
/* HYPERLINK SETTINGS */
#menu li a {
text-decoration: none;
display: block;
padding: 0 15px;
line-height: 40px;
}
/* HOVER AND ACTIVE BUTTON SETTINGS */
#menu li a:hover, #menu li.active a {
color: #15387a; background: #3D7BBB; border-bottom: 2px solid #204061
}
HTML
<ul id="menu">
<li class="active end"><a href="#">Home</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Get A Quote</a></li>
<li><a href="#">Drive For Us</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li class="end"><a href="#">Contact Us</a></li>
</ul>