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

【问题标题】：Border Width 100% of HTML + Responsive menu border & icon not correct边框宽度 100% 的 HTML + 响应式菜单边框和图标不正确
【发布时间】：2014-10-15 19:51:15
【问题描述】：

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

其次，我正在尝试为平板电脑和移动设备创建一个响应式菜单，将我的列表项更改为汉堡滑块。现在，这很尴尬，因为我的标题图像向左浮动，当我放入汉堡菜单时，即使我将两者都清除，它也不会跳到徽标下方。另外，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/

【问题讨论】：

I want the border to be 100% width of the browser. 你只需要body {margin: 0;}

标签： css menu responsive-design

【解决方案1】：

您设置了一些在移动设备或平板电脑上不需要的margins。
您需要在移动设备上删除它们才能获得全宽菜单。

@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;
}

【讨论】：

非常感谢！现在它看起来正是我想要的样子！

【解决方案2】：

至于让元素适合屏幕的整个宽度，这种组合将确保它是块元素。

.myElement {
    margin: 0;
    padding: 0;
    display: block;
}

使包括边距：0；身体上也是如此。我建议在您的主样式表之前使用 Normalize.css。这通常可以防止样式中的许多常见问题。

http://necolas.github.io/normalize.css/

【讨论】：

谢谢，我会加进去的！