Radiobutton样式未按预期显示

Question

我有一个非常基本的形式，但我使用了第三方css，这似乎给我一个问题。我在这个CSS中找了很久但是找不到导致这个问题的原因，

  Mevr.<input type="radio" name="gender" value="Mevr."> 
  Dhr.<input type="radio" name="gender" value="Dhr.">
   Fam.<input type="radio" name="gender" value="Fam.">

这就是我的期望

在第三方CSS处于活动状态时，我得到了这个：

我的问题是：我可以使用哪种内联样式将我的无线电按钮放在彼此旁边，就像在第一张照片中一样？

请注意： 导致问题的原因是here：

Answer 1

由于你没有给出编码。你可以试试这个：

<style>

.some-class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: none;
  display: block;
  padding: 2px 1em 0 0;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}
</style>

  

<div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>

Answer 2

由于您在帖子中未包含 CSS ，因此很难说出问题所在。

一个简单的猜测是，input的{​​{1}}属性为display。这会导致换行以及可能的其他 UI 更改（如屏幕截图所示）。

使用block可以解决此问题。

display: inline-block;

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th { 
margin:0;
padding:0;
}

input[type="radio"] {
    display: inline-block;
}

编辑根据您更新的问题，问题似乎与Mevr.<input type="radio" name="gender" value="Mevr."> Dhr.<input type="radio" name="gender" value="Dhr."> Fam.<input type="radio" name="gender" value="Fam.">个width代码有关。

您应该尝试将input属性设置为width

auto

input {
    border: 1px solid #b0b0b0;
    padding: 3px 5px 4px;
    color: #979797;
    width: auto;
}

只需将其替换为 CSS 中的现有文件。

旁注。我看到你的 CSS 在其内容中有多个声明。考虑通过它并删除不必要的声明。

Answer 3

我使用了虚拟HTML。试试这个：

＆＃13;

＆＃13;

<div style="float: left">
    <input id="RadioButtonList1_0" name="RadioButtonList1" value="One" type="radio"><label for="RadioButtonList1_0">One</label>

    <input id="RadioButtonList1_1" name="RadioButtonList1" value="Two" type="radio"><label for="RadioButtonList1_1">Two</label>

     <input id="RadioButtonList1_2" name="RadioButtonList1" value="Three" type="radio"><label for="RadioButtonList1_2">Three</label>

</div>

＆＃13;

＆＃13;

＆＃13;