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

Question

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想要＆＃34; SSSS＆＃34;位于＆＃34; XXXXXX＆＃34;的右侧文本

Answer 1

您的代码段问题：

• 请勿将输入嵌套在标签内。
• 您的for属性与input元素的name属性不匹配。

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

Answer 2

只需将display:flex添加到<label>，就像这样：

label {
  display: flex;
}

Here is the JSFiddle demo

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

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;