我有以下 html:
<div id="image">
<a href="link" title="some link"><img src="someimage"><p id="imagecaption">Some Link</p></a>
</div>
和CSS:
#mainimage a {
text-decoration: none;
border-bottom: 0;
}
#imagecaption {
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
}
这在图像底部提供了一个漂亮的半透明条,我用它来描述图像中的内容。图像和栏都是可点击的,并且会转到同一个地方。
不过,我目前有两个问题。首先显然你不能使用像 <p>
这样的东西和 <div>
在 <a>
里面标签。我应该改用什么?
其次,理想情况下,我想将栏中的文本从右侧边缘填充 10 像素,这样文本就不会紧靠右侧。我不能只使用 padding-right: 10px
因为我已经指定了宽度,所以会导致边框模型出现问题。
有什么想法吗?谢谢。
最佳答案
考虑使用 <span>
而不是 <p>
#imagecaption {
position:absolute;
left:0; right:0; bottom:0;
padding-right:10px; /* avoids box sizing issue */
text-align:right;
background:#000; /* for compatibility, use background not background-color */
background:rgba(0,0,0,0.6);
}
关于html - 替代 a 标签内的 div,并使用 text-align right 进行右填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21366302/