1

我是 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;
}

屏幕截图是

在此处输入图像描述 作为

如您所见，标签上限和百分比之间的区别清晰可见如何解决它帮助！

4

1 回答 1

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/

于 2013-06-19T18:35:07.917 回答