我的标题有一个图像,我试图在图像上放置一个文本 block ,以使图像的一部分“可点击”。但是,当我这样做时,标题下方和正文上方会出现一个空白。
有谁知道我该如何纠正这个问题?图片:/image/dIC9F.jpg
CSS
.meio {
background: url("http://www.oneideaperday.com/meio5.png");
background-repeat: repeat-y;
background-position:50% 0%;
text-indent: 250px;
}
.img {
margin: 0;
padding: 0;
display: block;
vertical-align:bottom;
position:relative; top:5px;
text-align: center;
}
.image {
position:relative;
float:center;
text-align: center
}
.image .text {
opacity: 0;
position:absolute;
top:55px;
left:505px;
width:300px;
}
.img .termos {
position:absolute;
top:55px;
left:835px;
width:300px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
font-size: 10px;
opacity: 0;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<body>
<div class="img">
<img src="http://www.oneideaperday.com/header1.png" alt=""/>
<div class ="termos">
<p>Termos de Uso</p>
</div>
<div class="meio">
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
a</br>
</div>
<div class="image">
<img alt="" src="http://www.oneideaperday.com/footer.png" />
<div class="text">
<p><a href="http://www.acumula.com.br">Acumula.com.br</a></p>
</div>
</div>
</body>
</head>
</html>
最佳答案
您的标记中似乎有很多错误...我会在尝试解决问题之前先修复这些错误 - 因为它可能会自动消失:
首先,确保所有打开和关闭元素相互关联(正如您从下图中看到的,您没有足够的 </div>
使用... body 、头部和html 都在提示标签不匹配)。您需要添加 </head>
整理你的缩进将帮助你追踪未闭合的标签。
其次</br>
不是标签,您应该使用 <br />
如果您尝试下面的标记会发生什么?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="img">
<img src="http://www.oneideaperday.com/header1.png" alt="" />
<div class="termos">
<p>Termos de Uso</p>
</div>
<div class="meio">
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</div>
<div class="image">
<img alt="" src="http://www.oneideaperday.com/footer.png" />
<div class="text">
<p><a href="http://www.acumula.com.br">Acumula.com.br</a></p>
</div>
</div>
</div>
</body>
</html>
关于css - 图像下方的空白 - 显示 :block not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12448564/