在下面的代码中,左侧div
块导航区域有填充,块顶部的固定(或绝对)位置div
看起来像 1em,但左侧没有填充,而另一个div
没有顶部或左侧的内容块上没有填充填充。至少在 Firefox 和 Chrome 中是这样。我怎样才能在position: absolute
块上没有填充。注意:如果我删除position: absolute
. 我该如何解决?我知道稍后我会想要填充,但我希望填充在导航和内容区域上看起来正确,并且我希望它们在没有填充作为基线的情况下看起来相同。
这是一张图片。看看左侧的 have 区域更厚,左侧的 content 区域如何变薄?
这是示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
}
div.content {
background: #000;
margin-left: 20em;
margin-right: 4em;
border-radius: 2em;
}
p {
color: #fff;
}
div.nav {
background: #000;
width: 16em;
position: absolute;
left: 1em;
top: 1em;
border-radius: 2em
}
</style>
</head>
<body>
<div class="content">
<p>This is content area text</p>
</div>
<div class="nav">
<p>This is a nav area text</p>
</div>
</body>
</html>