内联类不按预期工作

我是初学者在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

内联类不按预期工作

回答

相关问题