Inline class is not working as expected

Question

i am beginner in css i am building a webpage in bootstrap . i want two labels Percentage and UpperLimit both to the same level i applied the inline class but unable to figure it out why there is level difference and how to correct it. my html code is

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

and my main.css file is

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

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

and the screen shot is

enter image description here as

as you can see the difference between label Upper Limit and Percentage is clearly visible how to resolve it help !!

This is because of `display: inline-block`. Go through this [**link**](http://stackoverflow.com/q/1833734/1577396) to know more about it. — Mr_Green, Jun 19 '13 at 17:22

score 1 · Accepted Answer · answered Jun 19 '13 at 18:35

The trick here is to over-ride some of the Bootstrap styles.

Here is one way of doing it. Modify your HTML slightly by keeping the labels and input fields separate (not nested). Use the "for" attribute to link the labels to the input fields.

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

I used the following CSS, making the selectors specific enough to override the Bootstrap styles.

.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;
}

The gist of it is to make sure that the various inline elements are use vertical-align: baseline.

The styling is a bit complex, but it kind of works.

I did not try to place the .control-label element, but that should be easy enough.

The demo fiddle is: http://jsfiddle.net/audetwebdesign/PhqhS/

Inline class is not working as expected

1 Answers1