圆形水平CSS导航菜单的问题

我正在为一个网站设计一个导航菜单

菜单必须有圆角，我已经用“边框半径”完成了

我已经将宽度设置为800px，因为这是菜单需要的粗略宽度，如果我删除宽度或放置宽度：auto，宽度将变为100%

在我的导航菜单中，第一个按钮之前和最后一个按钮之后有一个间隙，我需要消除这个间隙，而不会丢失曲线边缘

如何使第一个和最后一个按钮保持圆角，并消除导航两侧之间的间隙

CSS:

HTML

删除

文本对齐：居中从
#菜单

您可能还希望包括
padding left:10px确保高亮显示第一个链接时，它不会与菜单的圆角重叠

请参阅。
删除
文本对齐：居中从
#菜单

您可能还希望包括
padding left:10px确保高亮显示第一个链接时，它不会与菜单的圆角重叠

请参阅。
将LIs的显示设置更改为
display:table cell


这样，在使用
display:inline block
时，您也不会被空白问题“困住”

看

注：忘记圆角…，现在也包括在内。；-）
 将LIs的显示设置更改为
display:table cell


这样，在使用
display:inline block
时，您也不会被空白问题“困住”

看

注：忘记圆角…，现在也包括在内。；-）
 因此，为了维护您的设计，需要做几件事：

1.）UL标签需要有
显示：表格

2.）就像@Netsurfer一样，您需要将LI设置为具有
display:table cell
，以便列表项与边缘齐平

3.）既然UL有圆角，那么任何带有方形角的子元素都会突出。您可以：
a、 ）通过将
溢出：隐藏
应用于UL和LI或
b、 ）将圆角应用于LI和A标记

4.）您的：hover&active状态应用了一个底部边框--
表格单元格
将使其看起来很奇怪。最好将其全部移除

您可以在此处查看代码：
因此，为了维护您的设计，需要做以下几件事：

1.）UL标签需要有
显示：表格

2.）就像@Netsurfer一样，您需要将LI设置为具有
display:table cell
，以便列表项与边缘齐平

3.）既然UL有圆角，那么任何带有方形角的子元素都会突出。您可以：
a、 ）通过将
溢出：隐藏
应用于UL和LI或
b、 ）将圆角应用于LI和A标记

4.）您的：hover&active状态应用了一个底部边框--
表格单元格
将使其看起来很奇怪。最好将其全部移除

您可以在此处查看代码：

        /* 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
        }

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