HTML/CSS如何对齐按钮内SVG图标 仅用Flexbox是否可行

完全可以仅用Flexbox实现文字居左、图标居右的FAQ按钮效果，不需要额外用绝对定位等方案，按以下步骤修改即可：

1. 修正HTML结构 #

当前结构存在几个明显问题：

• 后3个<li>标签未添加div-faq-list-item类，会导致列表项样式不统一，先给所有li补上该类
• SVG放在了button标签外部，无法跟随按钮内部布局规则排列，需要把SVG移到button标签内部，放在按钮文本的末尾，每个按钮都要放置对应SVG
• 删掉SVG中多余的背景矩形代码<rect width="100%" height="100%" fill="#333333"></rect>，按钮本身已经设置了#333背景，不需要SVG重复绘制背景，避免出现多余色块
  修改后的单个列表项结构参考：

<li class="div-faq-list-item">
  <button class="faq-btn">
    What is Netflix?
    <svg style="height: 50px; width: 50px; color: #fff;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
      <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
    </svg>
  </button>
</li>

2. 调整CSS样式 #

给.faq-btn添加Flex布局相关属性，原有属性保留，删除原有的text-align: left，新增3个Flex属性即可：

.faq-btn{
  background-color: #333;
  font-size: 25px;
  border: 0;
  width: 800px;
  padding: 22px;
  margin: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

属性作用说明： #

• display: flex：将按钮转为Flex容器，直接控制内部文本和SVG的排列规则
• justify-content: space-between：让容器内的文本、SVG两个子元素分别靠左右两端对齐，自动填充中间空白
• align-items: center：让文本和SVG在垂直方向居中对齐，避免上下错位
  原来写在.div-faq-list-item上的Flex规则不影响最终效果，可以保留也可以删除——结构调整后li内部只有button一个子元素，该Flex规则不会产生实际作用。
  修改完成后即可达到预期效果，全程仅使用Flexbox实现，无需额外技巧。

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