1

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

菜单必须有圆角，我用'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>
4

3 回答 3

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/

于 2013-09-18T00:57:36.060 回答
0

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

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

看到这个工作 jsFiddle。

于 2013-09-18T00:30:00.700 回答
0

将 LI 的显示设置更改为display: table-cell。
通过这样做，您也不会在使用display: inline-block.

见jsFiddle

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

于 2013-09-18T00:31:55.097 回答