Javascript 如何使输入文本与按钮中的单选按钮内联

我是一个新的引导构建网页。我的HTML页面的代码段是

<form class="form-horizontal">
  <div class="control-group">
    <p>Create a promo code</p>

  </div>
  <div class="control-group">
  <div> Promo description * </div>
    <div class="controls">
      <textarea rows="3"></textarea>
    </div>
  </div>
  <div class="control-group">
    <div>Promo Type</div>
    <div class="controls">
        <label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
  Instant Discount
</label>
<label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
  Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
    </div>
  </div>

  <div class="control-group">
  <div> Promo Value * </div>
    <div class="controls">
    <label class="radio inline">
  <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
  Percentage
<label for="hello" class="inline">Upper Limit</label>
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline">

<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
    </div>
  </div>


</form>

我得到了屏幕截图，这不是预期的任何其他建议

---

看起来像你想要的吗？

试试CSS:

显示：内联块；浮动：左

用于所有字段，或仅针对编辑字段尝试html:

size=“20”

（例如）

<form class="form-horizontal">
  <div class="control-group">
    <p>Create a promo code</p>

  </div>
  <div class="control-group">
  <div> Promo description * </div>
    <div class="controls">
      <textarea rows="3"></textarea>
    </div>
  </div>
  <div class="control-group">
    <div>Promo Type</div>
    <div class="controls">
        <label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
  Instant Discount
</label>
<label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
  Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
    </div>
  </div>

  <div class="control-group">
  <div> Promo Value * </div>
    <div class="controls">
    <label class="radio inline" id="label1">
  <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
  Percentage
  </label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>

<label class="radio inline" id="label3" >

<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
    </div>
  </div>
<div class="control-group">
  <div> Promo-code usage count *
 </div>
    <div class="controls">
    <label class="radio inline">
  <input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" checked></input>
  Unlimited
<label for="hello1" class="inline">Limited
<input id="hello" type="radio" class="radio inline">
</label>
<input id="hello" type="text" class="inline">

    </div>
  </div>


</form>

#hello,#optionsRadios4#optionRadios6#label1#label2#label3 {
  display: inline-block; float: left;
}