Responsive li nav background-color is only behind words答案

【问题标题】：Responsive li nav background-color is only behind wordsResponsive li nav background-color is only behind words
【发布时间】：2014-04-22 18:07:15
【问题描述】：

我正在编写基于 HTML 列表的响应式导航。

目标是一个导航，它总是填充 100% 宽度的标题，同样宽度的 li 元素。背景颜色仅显示在单词后面。它不会像应有的那样填充整个 li 元素。

这里是 HTML：

<nav>
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#" >About Us</a></li>
        <li class="sports"><a href="#" >Sports</a></li>
        <li class="news"><a href="#" >News & Events</a></li>
        <li class="vols"><a href="#" >Volunteer</a>/li>
        <li class="donate"><a href="#" >Donate</a></li>
    </ul>
</nav>

这里是 CSS：

.mainheader nav {
    background-color: #000000;
    height: 10%;
}

.mainheader nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0%;
}
.mainheader nav ul li {
    float: left;
    display: inline;
    width: 14.28%;
    padding: 0%;
    font-size: 20px;
    text-align: center
}

.mainheader nav a:link, .mainheader nav a:visited {
    color: #FFF;
    display: inline-block;
    text-align: 0 auto;
    padding: 17.5px 0px 17.5px 0px;
    height: 40px
}

.mainheader nav .about a:link, .mainheader nav .about a:visited {
    background-color: #7ab503; /* color not hover */
    text-shadow: none;
}
.mainheader nav .about a:visited, .mainheader nav .about a:hover {
    background-color: #bffc43; /* color hover */
}

/* all the other li elements have the same css structure as the .about one! */

感谢您的帮助！

【问题讨论】：

1.您没有为lis 提供背景，而只是为as 提供背景； 2.请填写fiddle^^.
text-align: 0 auto; 到底是什么？我猜你的意思可能是margin: 0 auto;。 .5px 的值是什么？没有意义。在0 属性值的情况下，例如padding: 0%，在没有测量单位的情况下写入这些值很有用。

标签： jquery css html-lists background-color

【解决方案1】：

使用 CSS flexbox 怎么样？

    .mainheader nav ul {
        display: flex;
        list-style:none;
        margin: 0 auto;
        padding: 0%;
        background: #7ab503;
    }

    .mainheader nav ul li {
        display: block;
        flex: 0 1 auto; /* Default */
        float:left;
        display: inline;
        width: 14.28%;
        padding: 0% ;
        font-size: 20px;
        text-align: center;
        background: #7ab503;
    }

然后你可以调整背景颜色

【讨论】：

【解决方案2】：

代码很乱，所以我在jsFiddle上稍微清理了一下

HTML：

<header class="mainheader">
<nav>
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="about"><a href="#" >About Us</a></li>
        <li class="sports"><a href="#" >Sports</a></li>
        <li class="news"><a href="#" >News & Events</a></li>
        <li class="vols"><a href="#" >Volunteer</a></li>
        <li class="donate"><a href="#" >Donate</a></li>
    </ul>
</nav>

CSS：

.mainheader nav {
    background-color: #000;
    text-align:center;
}

.mainheader nav ul {
    list-style: none;
    margin:0 auto;
    padding:0;
}
.mainheader nav ul:after {
    content:"";
    display:block;
    clear:both;

}

.mainheader nav ul li {
    display:table-cell;
    width:14.28%;
}

.mainheader nav a {
    color: #FFF;
    display: block;
    padding:10px;
    line-height: 20px
    font-size: 20px;
}

.mainheader nav .about a {
    background-color: #7ab503; /* color not hover */
    text-shadow: none;
}
.mainheader nav .about a:visited, .mainheader nav .about a:hover {
    background-color: #bffc43; /* color hover */
}

目前所有的导航都有居中和灵活的按钮，没有浮动的混乱代码，也没有与 IE8 不兼容的弹性框

【讨论】：