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>

このコードによって生成されたページのスクリーン ショットは次のとおりです。

あなたが見ることができるように、パーセントラジオボタンと上限ラベルとテキスト入力は互いにインラインではありません.私はそれらをインラインにしたい.

アップデート

今回はコメントで提案を試みましたが、私の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はあなたが望むものに見えますか?