1

私はcssの初心者で、ブートストラップでウェブページを構築しています。Percentage と UpperLimit の 2 つのラベルを同じレベルにしたいインライン クラスを適用しましたが、レベルの違いがある理由とそれを修正する方法がわかりません。私の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 スタイルをオーバーライドすることです。

ここにそれを行う1つの方法があります。ラベルと入力フィールドを別々 (入れ子にしない) にして、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 に答える