单选按钮一个接一个地出现

Question

我的应用程序中有自定义单选按钮。我的问题是，目前单选按钮单独显示很好。当我试图在一行中包含两个时……它们出现在彼此的上方，而不是彼此的旁边。我不能改变我的HTML，只能弄乱CSS。任何帮助都将不胜感激。我认为这是由于每个标签的宽度，但给它一个低的宽度有相同的结果。

HTML:

<label class="radio">
  <input type="radio">
  <span class="custom"><span>One</span></span>
</label>

CSS:

* {
  box-sizing: border-box;
}
input[type="radio"] {
  display: none;
  cursor: pointer;
}
label {
  cursor: pointer;
}
.radio span.custom > span {
  margin-left: 22px;
}
.radio .custom {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: inline-block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}
.radio input:checked + .custom:after {
  background-color: #0574ac;
  border-radius: 100%;
  border: 3px solid #fff;
  content: "";
  display: block;
  height: 12px;
  position: absolute;
  top: 0;
  width: 12px;
}
.radio input + .custom {
  border-radius: 100%;
}
.checkbox input:checked .custom {
  background-color: blue;
  border-color: blue;
}

<<p> JSFiddle演示/strong>

Answer 1

just edit label class so (just example):

label {
  cursor: pointer;
  display:inline-block;
  width: 50px;
  position:relative;
}

Answer 2

如果你想要定位每一个单独的

给每个span一个id标签，并在你的css中使用:

#your_span_id{ position: absolute; left:0px; height:100px; }
#your_second_span{ position:absolute; left:35px; height:100px;}

现在你的单选按钮在同一行，彼此相邻:)

欢呼

scriptmind.js