我的页面右侧有一堆空白区域,我无法弄清楚如何摆脱它.我很擅长编码.这是我的代码:
<!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%;
}
我不知道出了什么问题,我检查了我的代码,一切似乎都很好,至少据我所知.
这是因为你设置min-width: 100%了<p>标签.它导致它像屏幕一样宽,但因为它而错过了左边left:750px;.
相反,删除min-width.如果要点是将bla bla bla保持为内联,请white-space: nowrap改用:
p {
position:absolute;
top:20px;
left:750px;
white-space: nowrap;
}