如何设置忘记密码链接样式 避免整块区域继承链接可点击属性

你之前的写法存在两个核心问题：

1. 设置display:block的a标签宽度为50%时，块级元素默认左对齐，仅内部文本右对齐，无法实现整行靠右的效果
2. 宽度设为100%时，整个块的区域都会继承链接的点击属性，产生多余的可点击空白区域

方案1：通过父元素对齐控制（最简单，无需修改a标签默认属性） #

给包裹「忘记密码」链接的p标签设置右对齐即可，a标签保持默认行内属性，可点击区域仅包含文字本身：

/* 建议给该p标签单独加类名控制，避免影响页面其他p标签样式 */
form p {
  text-align: right;
  /* 可按需调整上下边距，覆盖p标签默认的margin */
  margin: 4px 0;
}

#forgotP {
  color: blue;
  text-decoration: none;
  font-size: 12px;
  font-weight: 300;
}

方案2：仅修改a标签自身样式，无需改动父元素 #

给a标签设置宽度仅适配内容，再通过左侧自动外边距推到容器最右侧：

#forgotP {
  color: blue;
  text-decoration: none;
  display: block;
  /* 宽度仅包裹文字内容 */
  width: fit-content;
  /* 左侧自动外边距将元素推到最右侧 */
  margin-left: auto;
  font-size: 12px;
  font-weight: 300;
}

额外优化提示 #

你现有HTML代码中a标签的target属性值写错了，正确写法是_blank而非_black，修正后才能正常在新标签页打开链接：

<a href="#" target="_blank" id="forgotP">Forgot Password?</a>

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