內聯類不按預期工作

我是初學者在CSS我正在建立一個網頁的引導。我想要兩個標籤百分比和UpperLimit都到我應用內聯類的同一級別，但無法弄清楚爲什麼存在級別差異以及如何糾正它。我的HTML代碼內聯類不按預期工作

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label">Promo Value</label> 
     <div class="controls"> 
      <label class="radio inline" id="label1"> 
       <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" class="inline" checked>Percentage</label> 
      <label for="hello" class="inline" id="label2">Upper Limit 
       <input id="hello" type="text" class="inline" placeholder="Text input" disabled="true" /> 
      </label> 
      <br /> 
      <input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> 
      <label class="radio inline" id="label3">Fixed Amount</label> 
      <input type="text" class="inline" placeholder="Amount Rs" disabled="true"> 
      <hr class="hhhh"></hr> 
     </div> 
    </div> 
</form>

和我的main.css文件

.inline { 
    display:inline-block; 
    margin-right:20px; 

} 
.inline1 { 
     display:inline-block; 
    height: 50px; 
    vertical-align: middle; 
    margin-top: 2px; 
}

和屏幕截圖是

enter image description here 作爲

，你可以看到標籤的區別上限和百分比清晰可見如何解決它的幫助！

來源

2013-06-19 Ritesh Mehandiratta

這是因爲'顯示：內聯block'。通過此[**鏈接**]（http://stackoverflow.com/q/1833734/1577396）瞭解更多關於它。 –

這裏的竅門是重載一些Bootstrap樣式。

這是一種做法。通過保持標籤和輸入字段分離（不嵌套），稍微修改您的HTML。使用「for」屬性將標籤鏈接到輸入字段。

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label">Promo Value</label> 
     <div class="controls"> 
      <input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked> 
      <label class="radio inline" id="label1">Percentage</label> 
      <label for="hello" class="inline" id="label2">Upper Limit</label> 
      <input id="hello" class="inline" type="text" placeholder="Text input" disabled="true" /> 
      <br /> 
      <input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> 
      <label class="radio inline" id="label3">Fixed Amount</label> 
      <input type="text" class="inline" placeholder="Amount Rs" disabled="true"> 
      <hr class="hhhh"></hr> 
     </div> 
    </div> 
</form>

我用下面的CSS，使選擇器具有足夠的重寫引導樣式。

.form-horizontal .control-group label.inline { 
    display: inline-block; 
    margin-right: 20px; 
    line-height: 30px; 
    vertical-align: baseline; 
    margin-top: 2px; 
} 
.form-horizontal .control-group input.inline { 
    vertical-align: baseline; 
} 
.form-horizontal .control-group .radio.inline { 
    padding-left: 10px; 
} 
.form-horizontal .control-group input[type="radio"] { 
    float: none; 
    display: inline-block; 
    vertical-align: baseline; 
}

它的要點是要確保使用各種內聯元素vertical-align: baseline。

造型有點複雜，但它的作品。

我沒有嘗試放置.control-label元素，但應該很簡單。

演示小提琴是：http://jsfiddle.net/audetwebdesign/PhqhS/

來源

2013-06-19 18:35:07

內聯類不按預期工作

回答

相關問題