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代码。每个人都可以更轻松地为您提供帮助：）

水平导航背景颜色停止一半

1 个答案: