如何<label>並排放置</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

您的代碼段的問題：

• 不要將您的輸入嵌套在標簽內。
• 您的for屬性與input元素的name屬性不匹配。

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

Answer 2

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

label {
  display: flex;
}

這是JSFiddle演示

另請注意，我刪除了您在代碼中提供的原始填充樣式。

Answer 3

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