如何在SweetAlert自定义单选框输入组件中实现文本左对齐？

嘿，我来帮你搞定这个对齐难题！你遇到的情况确实是SweetAlert的默认样式在捣乱，单纯用align这种旧属性已经不适用现代HTML了，咱们用CSS来彻底解决它。

问题分析 #

你原来的代码里用了align="left"这个过时的属性，而且SweetAlert的.swal-text容器默认带有内边距和文本对齐样式，这些都会干扰单选框和文本的左对齐效果。

解决方案 #

我们可以通过包裹单选框与文本、自定义CSS覆盖默认样式来实现完美左对齐：

1. 修改SweetAlert的HTML结构

把每个单选框和对应的文本用<label>标签包裹，这样不仅能让点击文本也选中单选框（提升用户体验），还方便统一控制样式：

swal({
  type: "info",
  title: "Reasons:",
  text: `
    <label class="radio-option">
      <input class="visibleInput" type="radio" name="reason" id="E1" value="FV1">
      FV1text
    </label>
    <br>
    <label class="radio-option">
      <input class="visibleInput" type="radio" name="reason" id="EOther" value="FV2">
      FV2text
    </label>
  `,
  textAlign: "left",
  showCancelButton: false,
  closeOnConfirm: false,
  closeOnCancel: false,
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel",
  html: true
});

2. 添加自定义CSS样式

覆盖SweetAlert的默认样式，确保内容完全左对齐，同时调整单选框和文本的间距：

/* 去掉SweetAlert文本区域的默认左内边距，强制左对齐 */
.swal-text {
  padding-left: 0 !important;
  text-align: left !important;
}

/* 让单选框和文本在一行内垂直居中对齐，设置合适间距 */
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px; /* 单选框与文本的间距，可根据需求调整 */
  margin-bottom: 8px; /* 选项之间的垂直间距 */
}

/* 重置单选框的默认外边距，避免多余留白 */
.radio-option input[type="radio"] {
  margin: 0;
}

为什么这样有效？ #

• <label>标签的包裹让单选框和文本形成一个整体，点击文本就能选中选项，同时方便用flex布局控制对齐。
• 自定义CSS直接覆盖了SweetAlert容器的默认内边距和文本对齐样式，消除了默认样式的干扰。

这样调整之后，你的单选框和文本应该就能完美左对齐啦！如果还有小问题，打开浏览器开发者工具（F12）查看元素的样式，看看有没有其他需要覆盖的默认属性~

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