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

Question

下面是当前页面外观的sn-p。

Radio buttons and their labels not in single line

下面是正在使用的一段代码。 (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>

我尝试过使用像

这样的内联样式

display: inline!important;

带有输入和标签标签，但没有任何效果。

在 Chrome 开发人员模式下检查时，我发现了一个额外的属性，该属性被附加在两个单选按钮的输入标签中，我无法弄清楚它来自哪里。

element.style {
    display: block;
}

有人可以建议方法来覆盖在此元素上实现的所有现有样式，以便将单选按钮及其标签放在一行中。我是前端部分的新手，所以请帮助我。另外，帮我找出这个样式的来源（可以使用 Chrome 开发者工具找到）

Answer 1

解决此问题的一种简单方法是将“float: left”添加到单选按钮。

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

这意味着您无需担心更改为display:inline-block。这个 sn-p 演示即使在单选按钮设置为 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>

这是之前和之后的照片：

Answer 2

在fmt之后写

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

我认为它会起作用。

Answer 3

你做错了。你错过了正确的名字。

改成display:inline-block;

在下面的示例中，我将它用于div's。但是这个 css 将适用于你想要的每一个元素。

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>