底部居中红边框按钮padding异常致宽度占满问题求助

问题描述 #

需要制作一个位于页面底部且居中的红边框按钮，但设置padding后按钮宽度近乎100%不符合预期，尝试设置margin后，X轴点击热区仍然过大。

原因分析 #

• 外层的.button容器和内部的<a>标签默认都是块级元素，宽度会占满父容器的100%，导致点击热区覆盖整个横向宽度
• .ano-letivo作为块级元素，即使设置了padding，也会继承父元素的100%宽度，视觉上呈现全屏宽度的按钮

解决方案 #

通过修改元素的显示模式和布局，让按钮宽度由内容决定，同时确保点击热区与视觉范围一致：

修改后的HTML #

<div class="message">
  <h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
  <h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button-container">
  <a href="example.com" class="ano-letivo">Ano Letivo</a>
</div>

修改后的CSS #

h1 {
    font-family: 'Abril Fatface', cursive;
    color: white;
    text-align: center;
    padding: 80px 300px 5px;
    font-size: 60px;
    text-shadow: 0px 2px 3px black;
}

h3 {
    font-family: 'Roboto Slab', serif;
    color: white;
    text-align: center;
    text-shadow: 0px 2px 3px black;
}

/* 按钮容器：居中并定位到底部 */
.button-container {
    text-align: center;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
}

/* 按钮样式：设置为inline-block让宽度由内容决定 */
.ano-letivo {
    display: inline-block;
    text-align: center;
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    border: 3px solid rgb(255, 69, 59);
    text-decoration: none; /* 移除a标签默认下划线 */
}

关键修改点 #

1. 将按钮外层容器命名为.button-container，通过text-align: center实现内部按钮居中，使用position: fixed固定在页面底部
2. 将<a>标签设置为display: inline-block，使其宽度由内容+padding决定，点击热区与按钮视觉范围一致
3. 移除多余的内部<div>标签，简化结构，直接给<a>添加按钮样式

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