在<a> tag at bottom of square <div></div></a> </span>中渲染<span>

Question

我有以下HTML：

<div class="square">
    <a class="block" href="@Model.HyperLink1">
        <span>@Model.Text1</span>
    </a>
</div>

CSS是：

.square {
    width: 140px;
    float: left;
}

.block {
    display: block;
    width: 140px;
    height: 140px;
}

a.block span {
    position: absolute;
    bottom: 0;
}

但是，跨度出现在我的页面底部而不是我定义的方块的底部。

如何让超链接的范围或文本显示在块的底部？

由于

Answer 1

将position: relative添加到块中。

.block {
    display: block;
    width: 140px;
    height: 140px;
    position: relative;
}