水平导航背景颜色中途停止

Question

即使我添加了 100% 的宽度，当链接用完时，导航背景颜色也会停止。与旧版本的 cSS2 相比，css3 似乎更难做到。我不知道下一步该怎么做，有没有人可以在不敲掉菜单的情况下帮忙？

          ``` /* header */
.nav {background-color:#3333FF; position: relative; top: 0; left: 3px; color: #fff; width: 100%;}
.nav ul {margin: 0; padding: 0; list-style: none;}
.nav li a {line-height: 40px; height: 40px; font-size: 18px; display: block; background-color:#3333FF; color: #fff; padding: 10px; text-decoration: none;}
.nav li a:hover, .nav .menu-btn:hover {background-color: #0000EE;}
/* menu */
.nav .menu {max-height: 0; display: inline-block; transition: max-height .2s ease-out;}
/* menu icon */
.nav .menu-icon {cursor: pointer; float: right; padding: 28px 20px; position: relative;}
.nav .menu-icon .nav-icon {background: #fff; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px;}
.nav .menu-icon .nav-icon:before, .nav .menu-icon .nav-icon:after {background: #fff; content: ''; display: block; height: 100%; transition: all .2s ease-out; width: 100%;}
.nav .menu-icon .nav-icon:before {top: 5px;}
.nav .menu-icon .nav-icon:after {top: -5px;}/* menu btn */
.nav .menu-btn {display: none;}
.nav .menu-btn:checked ~ .menu {max-height: 420px;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon {background: transparent;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:before {transform: rotate(-45deg); top:0;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:after {transform: rotate(45deg); top:0;}
@media (min-width: 48em) {.nav li {float: left;}
.nav li a {padding: 15px 15px;}
.nav .menu {clear: none; float: left; max-height: none; max-width: 100%;}
.nav .menu-icon {display: none;}
@media screen ony (max-width: 500px;) {
.wide ul li {height: auto; width: 100%;} 
.container ul li {width: 40%;} 
h1 span {display: none;} 
#main, #firstside, #second .container, .block, firstsidewider {width: 100%;}
.gcse-search {width:90%;}}

这是一些html

      ```

<header id="banner"><div class="nav"><input class="menu-btn" type="checkbox" id="menu-btn" /><label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label><ul class="menu"><li><a href="http://index.html">Home</a></li><li><a href="http://news.html">News</a></li><li><a href="http://contact.html">Contacts</a></li><li><a href="http://policies.html">Policies</a></li>
<li><a href="http://members.html">Members</a></li><li><a href="http://volunteer.html">Volunteer</a></li>
<li><a href="http://links.html">Links</a></li></ul></div>

Answer 1

问题是你添加的

@media (min-width: 48em) {
    ul {
        float: left;
    }
}

这阻止了 nav 的全宽，因为它的子项是浮动的。 你可以阅读更多here

您可以删除浮动，它会起作用，或者您可以这样做

.nav {
    position: absolute;
}

或

.nav {
    position: fixed;
}

阅读更多关于浮动元素的信息here

还有。一个提示.. 当您使用@media-query 时，请使用px 作为屏幕的宽度和高度。我发现这种方式效果最好。如果我错了，请有人纠正我

希望它有所帮助:)

愉快的编码

更新

下次请发布 CodePen 或 JSFiddle 代码。每个人都会更容易帮助你:)