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

Question

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

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

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

在我的导航菜单中第一个按钮之前和最后一个按钮之后有一个空隙，我需要什么来消除这个空隙而不丢失 flex 的边缘。

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

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 有了圆 Angular ，任何带有方 Angular 的子元素都会突出显示。您可以:a.) 通过将 overflow: hidden 应用于 UL 和 LI 或b.) 将圆 Angular 应用于 LI 和 A 标签。

4.) 您的 :hover & active 状态应用底部边框——table-cell 会导致它看起来很奇怪。最好将其完全删除。

您可以在此处查看代码:http://jsfiddle.net/vuAVV/