Question

我正在尝试制作一个横向填充所有屏幕的横幅，但它没有按预期工作。有些空间没有像你在这里看到的那样充满：http://i.imgur.com/12NrL7R.png

我很感激一些帮助，提前谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Best webpage ever</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">    
</head>    
<body>    
    <div class="banner">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Students</a></li>
            <li><a href="#">XXX tuga</a></li>
        </ul>

    </div>    
    <div id="container">
        <div id="content">
            <p>cona</p>
        </div>          
    </div>    
    <div class="banner">                    
    </div>   
</body>
</html>

.banner{
    background-color: black;
    width: 100%;
    height: 200px;
}

Answer 1

html, body {
    margin:0;
    padding:0;
}

试试这个，默认情况下body / html有填充，所以你可能想尝试删除它......

Answer 2

body标记在大多数浏览器中应用了一些间距。一定要：

body {
    margin: 0;
    padding: 0;
}

Answer 3

将此添加到您的css：

body{
  padding:0px;
}

让我知道是否有帮助

CSS宽度100％未按预期工作

3 个答案: