如何使文本输入内嵌单选按钮按钮

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样子，你想要什么？