Question

如果您访问我在Firefox上foramtionMTL上工作的网站，您会注意到标题菜单“CONTACT US”中最后一个元素的背景不会跨越整个字段。< / p>

为什么？我该如何解决？

HTML：

 <div class="headmenus">
    <ul>
    <li><a href="index.php">HOME</a></li>
    <li><a href="about.php">ABOUT US</a></li>
    <li><a href="search.php">COURSES</a></li>
    <li><a href="vacancies.php">VACANCIES</a></li>
    <li><a href="contact.php">CONTACT US</a></li>    
    </ul>
 </div>

CSS：

.headmenus {
    background: none repeat scroll 0 0 #0086B2;
    display: inline;
    float: left;
    margin: 0;
    width: 100%;
}
.headmenus ul {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    display: inline;
    float: left;
    font-family: 'texgyreadventorregular';
    font-size: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.headmenus ul li {
    border-right: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: inline;
    float: left;
    list-style-type: none;
    padding: 0;
    text-align: center;
    width: 19.895%;
    -moz-box-sizing: border-box;
}

.headmenus ul li a {
    color: #FFFFFF;
    display: inline;
    float: left;
    font-family: 'texgyreadventorregular';
    font-size: 14px;
    list-style-type: none;
    text-align: center;
    width: 100%;
    padding:5px 0px;
}
.headmenus ul li:hover {
    background: #89ab20;
    cursor: pointer;
}
.headmenus ul li.active {
    background: #89ab20;
}
headmenus ul li:last-child {
    border-right: 0 none;
        float: right;
    width: 19.9%; !important
}

Answer 1

您正在设置width值：

.headmenus ul li {
   width:19.895%;
}

将其更改为20％，然后五个项目可以100％满足父项：

.headmenus ul li {
   width:20%;
}

此外，对于所有浏览器都包含box-sizing，您只需包含-moz-前缀：

.headmenus ul li {
   box-sizing:border-box;
   -moz-box-sizing:border-box;
}

Answer 2

您的css选择器中有最后一个元素的拼写错误。它说headmenus ul li:last-child {而不是.headmenus ul li:last-child {。如果你解决了，你应该没事。

Answer 3

.headmenus ul li {
    border-right: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: inline;
    float: left;
    list-style-type: none;
    padding: 0;
    text-align: center;
    width: 20%;
    -moz-box-sizing: border-box;

试试这个

标题菜单中的最后一个元素无法正确格式化

3 个答案: