HTML

Question

我的标题下面有100％的宽度和灰线。该行应使用浏览器窗口的100％宽度。但是当我减小浏览器宽度时，灰线并不占据网页的整个宽度。为什么？很奇怪，但是身体标签需要一定的宽度值，尽管在css中没有为身体设置宽度。请检查下面的图片和代码。非常感谢！

如果您减少浏览器宽度，则会出现问题：右侧没有灰色边框了！ https://drive.google.com/file/d/0B35EX-b9d628ZmxBWFJjOTF1eFU/view

这是代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Max's Icebrrrg</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header>
        <div class="headerInner">
            <div class="logo">
                <h1>Icebrrrg</h1>
            </div>
            <div class="mainNav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Three Column</a></li>
                    <li><a href="">Sidebar Right</a></li>
                    <li><a href="">Sidebar Left</a></li>
                    <li><a href="">Full Width</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="contentWrapper">

    </div>

    <footer>

    </footer>

</body>
</html>

CSS

* {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

body {
    font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #444;
}



/******************** HEADER ************************/

header {
    border-bottom: 1px solid #E3E3E8;
    margin-bottom: 30px;
}

.headerInner {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.logo {
    width: 157px;
    height: 63px;
    background: url(../img/icebrrrg-logo.png) no-repeat;
    background-size: contain;
    margin: 22px 0;
    float: left;
    display: inline;
}

.logo h1 {
    text-indent: -99999px;
}

.mainNav {
    float: right;
    display: inline;
}

.mainNav ul {
    margin: 44px 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline;
}

.mainNav a {
    text-decoration: none;
    color: #2C88C9;
    padding: 48px 10px 43px;
    font-size: 12px;
    border-bottom: 3px solid white;
}

.mainNav a:hover {
    font-weight: bold;
    border-bottom: 3px solid #2C88C9;
}

Answer 1

您可以查看以下链接。我已经删除了与下面提到的.logo h1相关的css。

http://jsfiddle.net/57k17amb/1/

less

Answer 2

您的.headerInner具有固定width: 960px，body以及<header>默认为屏幕宽度，因此当它小于960px .headerInner溢出<header>

要解决此问题，只需将border-bottom: 1px solid #E3E3E8;从<header>移至.headerInner

Here a working jsfiddle example

或者将边框保留在原位，并将width: 960px;和margin: 0 auto设置为header。

Here the jsfiddle in this way

如果您希望边框延伸到屏幕，请执行以下操作：

header {
    margin-bottom: 30px;
    min-width: 960px;    
    border-bottom: 1px solid #E3E3E8;
}

And here the jsfiddle for this one

如果css中没有宽度属性，为什么有一定的宽度？

HTML

CSS

2 个答案: