css - 边框宽度 100% 的 HTML + 响应式菜单边框和图标不正确

Question

我网站的第一种情况是导航栏的边框底部。我已经尝试将 box-sizing 更改为 border-box 但它仍然不起作用。我希望边框为浏览器的 100% 宽度。

其次，我正在尝试为平板电脑和移动设备创建一个响应式菜单，将我的列表项更改为汉堡 slider 。现在，这很尴尬，因为我的标题图像向左浮动，当我放入汉堡菜单时，即使我清除了两者，它也不会跳到 Logo 下方。另外，li的边框乱了，我想让它填满屏幕的宽度..

我还没有为菜单图标添加 javascript，在我找到解决这些问题之前我不想继续请帮助:(

html:

<header>
    <a href="index.html"><img src="images/brand.png" alt="George Designs Logo" class="brand"></a>

    <img src="images/menu.png" alt="menu" class="menu-trigger">
    <nav class="nav-menu">
        <ul class="clearfix">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

css 在 js fiddle 中

这是完整的元素: http://jsfiddle.net/ntnzz1fj/2/

Answer 1

您设置了一些手机或平板电脑不需要的边距。
您需要为移动设备删除它们才能拥有全宽菜单。

@media screen and (max-width: 768px) {
    .nav-menu {
        margin: 0;
    }
    nav ul {
        margin: 0;
        padding: 0;
    }
    nav ul li {
        margin-right: 0;
    }
}

JSFiddle DEMO

同时删除浏览器默认边距。

body {
    margin: 0;
}