CSS布局异常求助：链接元素宽度超出设定div范围

相关代码 #

CSS代码

.otherprogramTemplate {
  background-color: rgba(0, 0, 0, 0.75);
  width: 400px;
  height: 185px;
  border-radius: 8px;
  margin: auto;
  color: white;
  padding: 0;
}

.otherprogramButton {
  text-decoration: none;
  text-align: center;
  padding: 0;
}

HTML代码

<a href="https://github.com/Necrosis000/Necrosis-Random-Colour-Generator" class="otherprogramButton">
  <div class="otherprogramTemplate">
    <p class="programTitle">Other Programs</p>
    <p class="programDesc">Click here to go to a list of my other programs/websites</p>
  </div>
</a>

问题：已为.otherprogramTemplate设置400px固定宽度，但外部的.otherprogramButton链接元素宽度远大于该div的实际尺寸，链接元素（蓝色区域）拉伸至整个屏幕，仅高度显示正常，宽度存在异常。

问题根源是<a>标签默认属于行内元素，当它包裹块级元素（如<div>）时，现代浏览器会将其转换为块级容器，但块级元素默认宽度为auto（即占满父容器的可用宽度），所以链接元素会撑满屏幕宽度，内部div仅在链接元素范围内居中显示。

提供两种解决方式：

• 方式一：固定链接元素宽度并居中
  给.otherprogramButton设置与内部div一致的宽度，同时通过margin: auto让链接元素本身居中：

.otherprogramButton {
  text-decoration: none;
  text-align: center;
  padding: 0;
  width: 400px; /* 匹配内部div宽度 */
  margin: auto; /* 让链接元素整体居中 */
  display: block; /* 显式声明为块级，确保宽度属性生效 */
}

• 方式二：让链接宽度贴合内部内容
  将.otherprogramButton设置为行内块元素，它的宽度会自动适配内部div的尺寸：

.otherprogramButton {
  text-decoration: none;
  text-align: center;
  padding: 0;
  display: inline-block;
}

若需要链接元素居中，可给它的父容器添加text-align: center属性。

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