如何并排放置 <label> 中的两个元素

Question

<label for="checkbox6">XXXXXX
     <div style="padding-left: 9.5%;padding-right: 45%;padding-bottom:1.5%"><input class="form-control" name="quantum" type="number" min="1" placeholder="SSSS" required></div>
     </label>

我希望 "SSSS" 位于 "XXXXXX" 文本的右侧

Answer 1

<div>
<label for="checkbox6">XXXXXX</label>
<input class="form-control" name="quantum" type="number" min="1" placeholder="SSSS" required>
</div>

Answer 2

您的代码段存在问题：

不要将您的输入嵌套在标签中。
您的 for 属性与 input 元素的 name 属性不匹配。

<div>
    <label for="myInput">XXXXX</label>
    <input name="myInput" placeholder="SSSS"/>
</div>

Answer 3

只需将 display:flex 添加到 <label>，如下所示：

label {
  display: flex;
}

Here is the JSFiddle demo

另请注意，我删除了您在代码中提供的原始填充样式。

如何并排放置 <label> 中的两个元素

How to position two elements in <label> side by side

html

label