如何使@Html.ActionLink生成的按钮与其他按钮尺寸一致？

我的网页上有四个按钮，其中通过@Html.ActionLink生成的“Download”按钮外观比其他按钮更粗。我已经给它设置了和其他按钮相同的btn btn-primary类，但问题依然存在。

相关代码 #

HTML/Razor代码：

<div class="form-group buttons-flex" style="margin-top:20px">
    <a style="float: left; margin-bottom:20px" href="/PDF/Index" class="Button btn btn-primary">Back to Main Page</a>
    <input style="float: right; margin-bottom:20px" type="submit" name="submitButton" id="myBtn1" value="Submit" class="btn btn-primary" />
    @Html.ActionLink("Download", "DownloadFile","Statement", null, new { @class = "btn btn-primary" });
    <a style="float: left; margin-bottom:20px" href="/FileUpload/Index" class="btn btn-primary">Upload Signed files</a>
</div>

CSS样式：

.buttons-flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

解决办法 #

• 取消默认加粗样式：@Html.ActionLink生成的是<a>标签，部分浏览器或框架会给原生链接添加默认加粗样式。直接给按钮类强制覆盖：

  .btn.btn-primary {
      font-weight: normal;
  }
  

• 清理布局冲突：你同时使用了flex布局和float属性，这会干扰flex的布局逻辑，导致按钮尺寸异常。

  1. 移除所有按钮上的float内联样式，修改后的代码如下：

     <div class="form-group buttons-flex" style="margin-top:20px">
         <a href="/PDF/Index" class="Button btn btn-primary">Back to Main Page</a>
         <input type="submit" name="submitButton" id="myBtn1" value="Submit" class="btn btn-primary" />
         @Html.ActionLink("Download", "DownloadFile","Statement", null, new { @class = "btn btn-primary" })
         <a href="/FileUpload/Index" class="btn btn-primary">Upload Signed files</a>
     </div>
     

  2. 调整flex容器样式，让按钮自动排列并支持换行：

     .buttons-flex {
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
         gap: 10px;
         margin: 20px 0;
     }
     

• 修正Razor代码错误：注意@Html.ActionLink末尾多了一个分号，这会在页面输出多余的字符，可能导致布局错位，直接删除分号即可。

• 统一盒模型（可选）：如果按钮宽度仍有差异，给.btn类添加盒模型设置，确保内边距和边框不会影响按钮总尺寸：

  .btn {
      box-sizing: border-box;
  }
  

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