简体   繁体   English

标头未填满整个页面?

[英]Header not filling entire page?

My header is set to a width of 100%, yet on the left side of the page there is a big gap although this isn't present on the right side of the page. 我的页眉设置为100%的宽度,但是在页面的左侧有很大的缝隙,尽管在页面的右侧没有。 Any thoughts? 有什么想法吗?

Here is my code: 这是我的代码:

HTML: HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
</head>

<body>
    <div id="header">
    <div class="nav">
        <ul class="navigation">
                <li><a href="#">Home</a></li>
                <li><a href="#">Galaxy S4</a>
                <ul>
                    <li><a href="#">Verizon</a></li>
                    <li><a href="#">ATT</a></li>
                    <li><a href="#">Sprint</a></li>
                    <li><a href="#">T-Mobile</a></li>
                    <li><a href="#">International</a></li>
                </ul>
                </li>

        </ul>
    </div>
</div>
    <div id="container">

    </div>

</body>
</html>

CSS: CSS:

@charset "utf-8";
/* CSS Document */
body{
    background-image:url(Images/backgroundmain.jpg);
    min-width:100%;
    font-family: Arial, Helvetica,sans-serif;
    font-size:15px;
}

#header{
    position:fixed;
    text-align:center;
    background-color:#474747;
    margin:auto;
    width:100%;
    height:50px;
    display:block;
    min-width:1000px;
}

#container{
    background-color:#FFF;
    margin:auto;
    width:70%;
}

.nav{
    text-align:center;
    background-color:#999;
}

.navigation {
    position:fixed;
    display:block;
    margin-top:15px;
    padding:0;
    list-style:none;
}

.navigation li {
    float:left;
    width:150px;
    position:relative;
}

.navigation li a {
    background:#262626;
    color:#fff;
    display:block;
    padding:8px 7px 8px 7px;
    text-decoration:none;
    border-top:1px solid #666;
    border-bottom:1px solid #666;
    text-align:center;
    text-transform:uppercase;
}
.navigation li a:hover {
    color:#666;
}

.navigation ul {
    position:absolute;
    left:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    border-bottom:1px solid #666;
}

.navigation ul li {
    width:150px;
    float:left;
    border-top:none;
}

.navigation ul a {
    display:block;
    height:15px;
    padding:8px 7px 13px 7px;
    color:#fff;
    text-decoration:none;
    border-top:none;
    border-bottom:1px solid #666;
}

.navigation ul a:hover {
    color:#666;
}

JavaScript (If it matters..?): JavaScript(如果有关系..?):

// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
    $('.navigation li').hover(
// When mouse enters the .navigation element
        function () {
//Fade in the navigation submenu
            $('ul', this).fadeIn(); // fadeIn will show the sub cat menu
        },
// When mouse leaves the .navigation element
        function () {
//Fade out the navigation submenu
            $('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
        }
    );
});

在左侧显示空间。

You need to remove the default margin on the body by adding margin:0 : 您需要通过添加margin:0来删除主体上的默认边距:

body {
    background-image:url(Images/backgroundmain.jpg);
    min-width:100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size:15px;
    margin:0;
}

jsFiddle example jsFiddle示例

Try setting *{margin: 0; padding: 0;} 尝试设置*{margin: 0; padding: 0;} *{margin: 0; padding: 0;} to remove any padding/margin the browser automatically puts on elements. *{margin: 0; padding: 0;}删除浏览器自动放置在元素上的任何填充/边距。

您在body元素上使用填充和边距,总和为30 px,请删除填充和边距,或使其为0以填充宽度

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM