Html 并排对齐两组复选框

大家好，我正在尝试将表单中的两组复选框并排对齐，并使复选框很好地对齐，但每次我将复选框并排对齐时，右侧的复选框将混乱，具体取决于左侧的文本大小

所以我想知道是否有办法

这是密码

更新损坏的代码

---

最简单的方法是通过CSS给名字（如“足球”、“奔驰”等）一个固定的宽度

基本上是这样的：

<h1>Sports</h1>

<div>
    <input type='checkbox' name='system_type17' value='2' />
    <input type="checkbox" name="system_type3" value="5" />
    <span style="width:100px;display:inline-block;">Soccer</span>
    <input type='checkbox' name='system_type17' value='2' />
    <input type="checkbox" name="system_type3" value="5" />
    <span style="width:100px;display:inline-block;">Mercedes</span>
</div>           
<div>
    <input type='checkbox' name='system_type18' value='3' />
    <input type='checkbox' name='system_type4' value='4' />
    <span style="width:100px;display:inline-block;">Mercedes</span>
    <input type="checkbox" name="system_type7" value="2" />
    <input type="checkbox" name="system_type8" value="3" />
    <span style="width:100px;display:inline-block;">Mercedes</span>
</div>

运动
足球
梅赛德斯
梅赛德斯
梅赛德斯

---

当然，理想情况下，CSS不应该是内联的。但我希望你明白我的意思

你能举一个失败的例子吗？那代码对我来说很好。你想做什么。您的示例没有任何需要成为有效HTML的标签元素（更不用说可访问性）。你；在设置样式之前，您需要确保所有内容都在其中，以便以后不会再次遇到此问题。您需要将文本包装到元素中，以便为其指定宽度（允许对齐后续元素），或者使用JavaScript，本质上，也可以这样做。你喜欢哪个？你可以考虑使用表格来对齐表单元素并取出表格边框。表通常用于对齐表单元素。有多种方法可以正确标记表单字段，这就是验证不需要元素的原因。标记仍然无效。我接受您的解决方案，但在本例中，我使用了左边距而不是宽度。：）若它对你们有用的话，很好，但左边的边距和宽度不同。宽度定义了一个固定的宽度（比如说100px），所以所有文本都有相同的空间来占据（宝马，与梅赛德斯相同）。使用左边距时，无论文本有多长，您只为文本提供完全相同的左边距（比如说20px）。BMW将是它的原始宽度加上20px，Mercedes将是它的原始宽度加上20px。我没有将类应用于文本，这就是为什么在这种情况下它对我有效，就像我只是使用，而是使用左边的边距，这样我可以得到我想要的复选框出现的确切位置。