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

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

相反，请删除min-width。如果要保持bla bla bla inline，请改为使用white-space: nowrap：

See DEMO

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

Answer 2

添加

body {
  margin 0;
  padding: 0;
}

到您的CSS。

为什么我页面右边有一堆空格？

2 个答案: