如何使用CSS在按钮旁添加并对齐loading加载图标

你当前加载图标无法和按钮并排的核心原因是#loading-bar-spinner.spinner设置了position: absolute，配合left/top: 50%属性让它脱离了正常文档流，固定定位到了页面视口的居中位置，自然无法跟随按钮排列。

解决方案 #

用flex布局包裹按钮和加载图标，取消加载图标的绝对定位属性即可实现对齐，修改代码如下：

完整修改后CSS代码

/* 新增按钮组容器样式 */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* 可自定义调整按钮和加载图标的间距 */
}

#loading-bar-spinner.spinner {
  /* 移除原有的absolute、left、top、margin相关定位属性 */
  z-index: 19 !important;
  animation: loading-bar-spinner 400ms linear infinite;
}

#loading-bar-spinner.spinner .spinner-icon {
  width: 20px;
  height: 20px;
  border: solid 4px transparent;
  border-top-color: #E4002B !important;
  border-left-color: #E4002B !important;
  border-radius: 50%;
  /* 移除原有的float: left属性，flex布局不需要浮动 */
}

@keyframes loading-bar-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

完整修改后HTML代码

<form name="sample_data" class="form2">
  <label for="fname">First Name</label>
  <input name="fname" id="fname_id" type="text"><br />
  <label for="lname">Last Name</label>
  <input name="lname" id="lname_id" type="text">
  <!-- 新增flex容器包裹按钮和加载图标 -->
  <div class="btn-group">
    <input type="submit" class="sfmc_btn" id="subm_sfmc" value="submit">
    <div id="loading-bar-spinner" class="spinner">
      <div class="spinner-icon"></div>
    </div>
  </div>
</form>

调整后加载图标会默认和提交按钮在同一行垂直居中对齐，原来的加载动画逻辑完全不受影响。

内容的提问来源于stack exchange，提问作者Mr.M