html - 替代 a 标签内的 div，并使用 text-align right 进行右填充

Question

我有以下 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因为我已经指定了宽度，所以会导致边框模型出现问题。

有什么想法吗？谢谢。

Answer 1

考虑使用 <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);
}