link元素可点击范围过宽，如何仅让Link文本可点击且保持右对齐？

问题根因 #

你之前的两种写法存在各自的问题：

1. 设置display: block时，<a>标签会默认占满父容器的整行宽度，导致整行区域都可点击
2. 改成display: inline-block后标签宽度仅和文本内容一致，但是没有对应的右对齐规则，所以默认靠左显示

解决方案 #

两种纯CSS修改方案，都不需要改动现有HTML结构：

方案1：浮动实现（兼容性最好） #

修改.link-text的样式如下即可：

main .posts-content .posts .single-post .link-text {
    font-size: 12px;
    color: #25aa7e;
    font-weight: 600;
    float: right; /* 核心规则：浮动到右侧 */
    margin-bottom: -10px;
}

如果父元素.post-details出现高度塌陷问题，给父元素加一条overflow: hidden即可修复。

方案2：fit-content+自动边距实现（现代浏览器兼容） #

适合不需要兼容IE等老旧浏览器的场景：

main .posts-content .posts .single-post .link-text {
    font-size: 12px;
    color: #25aa7e;
    font-weight: 600;
    display: block;
    width: fit-content; /* 标签宽度仅包裹文本内容 */
    margin-left: auto; /* 左侧自动留白实现右对齐 */
    margin-bottom: -10px;
}

两种方案都可以实现仅「Link」文本区域可点击，同时保持右对齐的效果。

内容的提问来源于stack exchange，提问作者JDS