屏幕左侧的额外空白

时间：2015-05-15 04:51:25

标签： html css

即使我已经删除了lower_content div的填充和边距，我仍然会在屏幕的左侧看到这个薄的空白区域...就像有一个看不见的边缘，我在任何地方都找不到。我的内容很好地到达了屏幕的右侧，但不是左侧。

请帮我找到问题...

HTML：

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>My name here</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="styleForFullPage.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

    <div class="side_banner">
        <nav>

            <ul>
                <li><a href="#" >HOME</a></li>
                <li><a href="about_me_FP.html" >ABOUT ME</a></li>
                <li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
                <li><a href="contact_me_FP.html" >CONTACT</a></li>
            </ul>
            <hr/>
        </nav>
    </div>

    <div class="name_div">
        <h1>My name here</h1>
    </div>

    <div class="lower_content">
        <p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
            <br/>
    LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        <br/>
            LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        </p>
    </div>  


</html>

CSS：

@font-face {
        font-family: comfortaa;
        src: url(Comfortaa-Regular.ttf);
    }


html { 
  background: url(meAndTheOcean.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
}



.side_banner{
    /*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
    font-family: comfortaa;

    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.3999996185303px;

    background-color:transparent;


    float:left;
    height:100%;
    width: 150px;
    margin: 0% 2% 2% 0%;
}


.side_banner nav ul{
    width: 100%;
    list-style: none;
    list-style-type:none;
    padding: 0;


}



.side_banner nav ul li{

}
.side_banner nav a:link, .side_banner nav a:visited{
    color: white;
    display:block;
    text-decoration: none;
    /*padding: 10px 25px;*/
    padding: 10px;
}

.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
    text-decoration: none;
    background-color: orange;
    /*background-color: 1C6BA0;*/
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.main_content{
    float: left;
    margin: 1% 2% 2% 2% ;
    width: 70%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color:white;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.name_div{
    font-family:comfortaa;
    color: white;

    text-align: center;

    width: 300px;
    height:200px;

    position:absolute;
    left:50%;
    top:50%;
    margin:-110px 0 0 -150px;
}

.lower_content{
    overflow: auto;
    position: absolute;
    top: 650px;
    width:100%;

    background-color:white;

    overflow-x:hidden;


    color:black;
    font-size:20;

    margin: 0% 0% 0% 0% ;
    padding: 0;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

4 个答案:

答案 0 :(得分：3)

<body>默认拥有自己的margin 8px。

只需定义规则

即可 
body{
  margin:0;
}

或者，如评论中所述，对body和html使用集体规则：

html, body{
  …
}

答案 1 :(得分：1)

我已经清理了你的鳕鱼，请检查一下它可能对你有帮助

@font-face {
        font-family: comfortaa;
        src: url(Comfortaa-Regular.ttf);
    }
body { 
  background: #6fa5ae; 
  margin: 0;
  padding: 0;
}
.side_banner{
    font-family: comfortaa;
    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26px;
    float:left;
    width: 150px;
    margin: 0% 2% 2% 0%;
}
.side_banner nav ul{
    width: 100%;
    list-style: none;
    padding: 0;
}
.side_banner nav a:link, .side_banner nav a:visited{
    color: white;
    display:block;
    text-decoration: none;
    padding: 10px;
}
.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
    text-decoration: none;
    background-color: orange;
    text-shadow: none;
    border-radius:5px;
}
.main_content{
    float: left;
    margin: 1% 2% 2% 2% ;
    width: 70%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color:white;
    border-radius:5px;
}

.name_div{
    font-family:comfortaa;
    color: white;
    text-align: center;
    width: 300px;
    height:200px;
    position:relative;
    margin:0;
    float: right;
}

.lower_content{
    overflow: auto;
    position: relative;
    float: left;
    width:92%;
    margin: 2%;
    background-color:white;
    overflow-x:hidden;
    color:black;
    font-size:20;
    padding: 2%;
    border-radius:5px;
}
    <div class="side_banner">
        <nav>

            <ul>
                <li><a href="#" >HOME</a></li>
                <li><a href="about_me_FP.html" >ABOUT ME</a></li>
                <li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
                <li><a href="contact_me_FP.html" >CONTACT</a></li>
            </ul>
            <hr/>
        </nav>
    </div>

    <div class="name_div">
        <h1>My name here</h1>
    </div>

    <div class="lower_content">
        <p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
            <br/>
    LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        <br/>
            LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        </p>
    </div>

答案 2 :(得分：0)

当你为ul设置list-style为none时，保留项目标记的左边距仍然存在。你只需要覆盖ul的左边距。

答案 3 :(得分：0)

见这里。 

@font-face {
        font-family: comfortaa;
        src: url(Comfortaa-Regular.ttf);
    }
body{
margin:0;
  padding:0;
}

html { 
  background: url(meAndTheOcean.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
}



.side_banner{
    /*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
    font-family: comfortaa;

    font-size: 18px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.3999996185303px;

    background-color:transparent;


    float:left;
    height:100%;
    width: 150px;
    margin: 0% 2% 2% 0%;
}


.side_banner nav ul{
    width: 100%;
    list-style: none;
    list-style-type:none;
    padding: 0;
    margin:0;


}



.side_banner nav ul li{
background:#000;
}
.side_banner nav a:link, .side_banner nav a:visited{
    color: white;
    display:block;
    text-decoration: none;
    /*padding: 10px 25px;*/
    padding: 10px;
}

.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
    text-decoration: none;
    background-color: orange;
    /*background-color: 1C6BA0;*/
    text-shadow: none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.main_content{
    float: left;
    margin: 1% 2% 2% 2% ;
    width: 70%;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    color:white;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}

.name_div{
    font-family:comfortaa;
    color: white;

    text-align: center;

    width: 300px;
    height:200px;

    position:absolute;
    left:50%;
    top:50%;
    margin:-110px 0 0 -150px;
}

.lower_content{
    overflow: auto;
    position: absolute;
    top: 650px;
    width:100%;

    background-color:white;

    overflow-x:hidden;


    color:black;
    font-size:20;

    margin: 0% 0% 0% 0% ;
    padding: 0;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}
<div class="side_banner">
        <nav>

            <ul>
                <li><a href="#" >HOME</a></li>
                <li><a href="about_me_FP.html" >ABOUT ME</a></li>
                <li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
                <li><a href="contact_me_FP.html" >CONTACT</a></li>
            </ul>
            <hr/>
        </nav>
    </div>

    <div class="name_div">
        <h1>My name here</h1>
    </div>

    <div class="lower_content">
        <p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
            <br/>
    LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        <br/>
            LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! 
LOWER CONTENT! LOWER CONTENT! 
        </p>
    </div>

相关问题
最新问题