如何使用Button中的单选按钮内联输入文本

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标签和文本输入不是彼此内联。我想让它们inline.can任何一个请帮助如何完成这个??

更新

我这次在评论中尝试了我的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

this JSBin看起来像你想要的吗？