为什么我的页面右侧有一堆空白？

Question

页面右边有一堆空白，我想不出如何摆脱它。 我是编码新手。 这是我的代码：

<!DOCTYPE html>

<html>

<head>
    <title>blablabla</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
</head>

<body>
    <div class="wrap">
        <!-- BEGIN HEADER -->
        <div class="topheader">
            <img src="uglyperson.jpg" id="logo"/>
            <h1 id="quote"><em>"blablablablabla."</em></h1>
            <p>
            <a href="#">bla</a> 
            <a href="#">bla</a> 
            <a href="#">bla</a> 
            <a href="#">bla</a>
            </p>
        </div>
        <!-- END HEADER -->
        <hr />
    </div>  

</body>

</html>

而我的CSS：

a:link {
    color:white;
    background-color:lightgreen;
    text-decoration:none;
    font-size:50px;
    padding-left:20px;
    padding-right:20px;
}

a:visited {
    color:white;
    background-color:lightgreen;
    text-decoration:none;
    font-size:50px;
    padding-left:20px;
    padding-right:20px;
}

p {
    position:absolute;
    top:20px;
    left:750px;
    min-width:100%;
}

#logo {
    height:150px;
}

h1 {
    font-size:50px;
    position:absolute;
    top:0px;
    left:180px;
}

.wrap {
    width:95%;
    min-width:100%;
}

我不知道出什么问题了，我检查了我的代码，一切似乎都很好，至少据我所知。

Answer 1

这是因为您在<p>标记上设置了min-width: 100% 。 这导致它与屏幕一样宽，但由于left:750px;错位，所以left:750px; 。

而是删除min-width 。 如果要保持bla bla bla内联，请使用white-space: nowrap ：

见演示

p {
    position:absolute;
    top:20px;
    left:750px;
    white-space: nowrap;
}

Answer 2

加

body {
  margin 0;
  padding: 0;
}

到您的CSS。

为什么我的页面右侧有一堆空白？

问题描述

2 个解决方案

解决方案1
5 已采纳 2014-10-15 23:03:31

解决方案2
0 2014-10-15 23:01:20

为什么我的页面右侧有一堆空白？

问题描述

2 个解决方案

解决方案1 5 已采纳 2014-10-15 23:03:31

解决方案2 0 2014-10-15 23:01:20

解决方案1
5 已采纳 2014-10-15 23:03:31

解决方案2
0 2014-10-15 23:01:20