Question

我是css的初学者我在bootstrap中构建一个网页。我想要两个标签Percentage和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 如

正如您所看到的，标签上限和百分比之间的差异清晰可见，如何解决它有帮助!!

Answer 1

这里的诀窍是覆盖一些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，使选择器具体到足以覆盖Bootstrap样式。

.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/

内联类未按预期工作

1 个答案: