1

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>
4

3 に答える 3