代码之家 › 专栏 › 技术社区 › Alex

引导对齐表单开关左侧的标签

alignment checkbox css html

Alex · 技术社区 · 2 年前

我目前无法将标签与开关盒左侧对齐。在浏览了各种stackoverflow页面和其他网站后,我仍然无法将标签向左对齐。

请在下面找到我删掉的不需要的代码片段:

 <form method="POST" id="registration-form">
  <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="height" @click='imperialHeight()'>
     <label class="form-check-label" for="bmi">Imperial</label>
 </div>
 <br>
 <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="weight-switch" @click='imperialWeight()'>
     <label for="weight-switch">Imperial</label>
   </div>
</form>

请注意,没有任何相关的CSS。我正在使用Bootstrap 5,请看下面的屏幕截图: Current Checkboxes

谢谢你抽出时间, 亚历克斯

2 回复 | 直到 2 年前

Albert Logic Einstein Abd Abughazaleh 2 年前

有了CSS,我们就能完成这项工作。

.form-switch {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
</form>

另外,请注意,对齐和定位是两件不同的事情。在这种情况下,你的问题是关于定位。

当我们谈到文本对齐时, 我们通常指 text-align 所有物

.some_text {
  text-align: left;
}

所以不要混淆对齐和定位。

使现代化

为了减少标签和开关之间的空间, 移除 justify-content 属性并添加 margin-right 贴标签。

.form-switch {
  display: flex;
  flex-direction: row-reverse;
}

.form-switch label {
 margin-right: 50px !important;
}

<脚本src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap。捆min.js“></script>
<链接href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap。min.css“rel=”样式表“/>;
<表格>
<div class=“表单检查表单开关”>
<输入class=“form check input”type=“checkbox”role=“switch”id=“flexSwitchCheckDefault”>
<label class=“form check label”for=“flexSwitchCheckDefault”>默认开关复选框输入</标签>
</部门>
<div class=“表单检查表单开关”>
<input class=“form check input”type=“checkbox”role=“switch”id=“flexSwitchCheckChecked”checked>
<label class=“form check label”for=“flexSwitchCheckChecked”>选中开关复选框输入</标签>
</部门>
<div class=“表单检查表单开关”>
<input class=“form check input”type=“checkbox”role=“switch”id=“flexSwitchCheckDisabled”disabled>
<label class=“form check label”for=“flexSwitchCheckDisabled”>禁用开关复选框输入</标签>
</部门>
<div class=“表单检查表单开关”>
<input class=“form check input”type=“checkbox”role=“switch”id=“FlexSwitchCheckedDisabled”选中禁用>
<label class=“form check label”for=“FlexSwitchCheckedDisabled”>禁用选中开关复选框输入</标签>
</部门>
</表格>

这里有一个 fiddle 为了它