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

Question

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

菜单必须有圆角，我使用'border-radius'完成了这个。

我已将宽度设置为 800 像素，因为这是菜单需要的粗略宽度，如果我删除宽度或放置宽度：自动宽度变为 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>

Answer 1

因此，为了维护您的设计，需要做几件事：

1.) UL 标签需要有display: table

2.) 就像 @Netsurfer 你需要将 LI 设置为 display: table-cell 以便列表项刷新到边缘

3.) 现在 UL 具有圆角，任何带有方角的子元素都会突出。您可以： a.) 通过将overflow: hidden 应用于 UL 和 LI 或 b.) 将圆角应用于 LI 和 A 标签。

4.) 你的 :hover & active 状态应用了一个底部边框——table-cell 会使这看起来很奇怪。完全删除它可能会更好。

您可以在这里查看代码：http://jsfiddle.net/vuAVV/

Answer 2

从#menu 中删除text-align: center;。

您可能还想包含padding-left: 10px; 以确保第一个链接突出显示时不会与菜单的圆角重叠。

见this working jsFiddle。

Answer 3

将 LI 的显示设置更改为 display: table-cell。
通过这样做，您在使用display: inline-block 时也不会被空白问题“困住”。

见jsFiddle

PS：忘了圆角...，现在也包括在内。 ;-)