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

Question

下面是当前页面外观的摘要。

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

只需在fmt之后写

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

我认为它会起作用。

Answer 2

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

将其更改为display:inline-block;

在下面的示例中，我将其用于div。但这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>

Answer 3

一种简单的解决方法是在单选按钮上简单地添加“ 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。此摘录演示即使单选按钮设置为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>

这是之前和之后的照片：