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

Question

我是引导构建网页的新手。我的 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>

此代码生成的页面屏幕截图是

如您所见，百分比单选按钮和Upperlimit标签和文本输入彼此不内联。我想让它们内联。任何人都可以帮助如何实现这一点吗？

更新

这次我尝试了评论中的建议，我的 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" 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>

并且main.css是

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

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

Answer 1

这个 JSBin看起来像你想要的吗？