Question

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

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

我将宽度设置为800px，因为这是菜单需要的粗略宽度，如果我移除宽度或放宽度：自动宽度变为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。）你的：悬停＆amp;活动状态应用底部边框 - table-cell会使其看起来很奇怪。完全删除它可能会更好。

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

Answer 2

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

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

请参阅this working jsFiddle。

Answer 3

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

请参阅jsFiddle

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

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

3 个答案: