无法将单选按钮及其标签对齐一行

Question

Below is a snippet of the appearance of current page.

Radio buttons and their labels not in single line

Below is the piece of code is being used. (JSP)

 <div class="leftFormComp" style="width: 100%;"> <label class="inputLabel" for="ext-comp-1045"> <span class="required">*</span><fmt:message key="registration.agreement"/> </label> <div id="x-form-el-ext-comp-1045" class="x-form-element" style="padding-left: 8px;"> <div id="ext-comp-1045" class=" x-form-checklist" style="width: 344px; height: auto;"> <div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px"> <input id="termsAgree-Y" class="x-form-field" type="radio" value="Y" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-Y"><fmt:message key="registration.yes"/></label> </div> <div class="x-form-cb-li x-form-cb-li-h"> <input id="termsAgree-N" class="x-form-field" type="radio" value="N" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-N"><fmt:message key="registration.no"/></label> </div> </div> </div> </div> 

I have tried using inline styling like

display: inline!important;

with input and label tags but nothing is working.

While checking in Chrome Developer mode, I came across an extra attribute that was getting appended in the input tags of both the radio buttons and I am unable to figure out from where it is coming.

element.style {
    display: block;
}

Can someone please suggest way to override all existing stylings that are getting implemented on this element, so as to bring the radio buttons and their labels in one line. I am new to front-end part, so please help me out. Also, help me find the origin of this styling (Can it be found using Chrome Developer tool)

Answer 1

Just write after fmt

<label class="x-form-cb-label" for="termsAgree-Y">
      <fmt:message key="registration.yes" />Yes
</label>

i think it will work.

Answer 2

You did that wrong. You missed the right name.

change it into display:inline-block;

In the example below I used it onto the div 's. But this css will work on every element you want.

 div{display:inline-block;} 

 <div class="leftFormComp" style="width: 100%;"> <label class="inputLabel" for="ext-comp-1045"> <span class="required">* Subject</span><fmt:message key="registration.agreement"/> </label> <div id="x-form-el-ext-comp-1045" class="x-form-element" style="padding-left: 8px;"> <div id="ext-comp-1045" class=" x-form-checklist" style="width: 344px; height: auto;"> <div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px"> <input id="termsAgree-Y" class="x-form-field" type="radio" value="Y" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-Y"><fmt:message key="registration.yes"/>Yes</label> </div> <div class="x-form-cb-li x-form-cb-li-h"> <input id="termsAgree-N" class="x-form-field" type="radio" value="N" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-N"><fmt:message key="registration.no"/>No</label> </div> </div> </div> </div> 

Answer 3

An easy way to fix this would be to simply add "float: left" to the radio buttons.

<input style="float:left" id="termsAgree-N" class="x-form-field" type="radio" value="N" name="termsAgree"> 
<label class="x-form-cb-label" for="termsAgree-N"><fmt:message key="registration.no"/></label>

This means you don't need to worry about changing to display:inline-block . This snippet demonstrates that it works even when the radio buttons are set to display:block .

 <div> <input type="radio" style="display:block;" /> <label>without float:left</label> </div><br/> </br/> <div> <input type="radio" style="display:block; float:left" /> <label>with float:left</label> </div> 

This is a picture of before and after: