圆形标签对齐

Question

尝试在我的单选按钮标签之后或标签之前放置一个绿色框/圆圈。任何一个都可以工作。

<div class="box green" ></div>
<input type="radio" id="radioOne" value="Y"/> <label>Verified Yes</label> 

我知道这应该很容易用CSS但是如果我使用display：inline in the css for the radio button，圆圈就会消失，除此之外我只能将圆圈放在线条的上方或下方单选按钮。

Answer 1

使用display: inline-block，例如：

.box {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: green;
  border-radius: 50%;
}

查看下面的工作代码段：

＆＃13;

＆＃13;

.box {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: green;
  border-radius: 50%;
}

＆＃13;

<input type="radio" id="radioOne" value="Y"/> <label>Verified Yes <span class="box green"></span></label>
<br>
<input type="radio" id="radioTwo" value="Y"/> <label><span class="box green"></span> Verified Yes</label>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

通常你应该提供CSS等。

https://jsfiddle.net/3n1n0y05/

您可能只是忘记设置宽度/高度或内容

#radioOne + label:before {
  content: "";
  width: 15px;
  height: 15px;
  background: red;
  display: inline-block;
  border-radius: 50%;
}

#radioOne:checked + label:before {
  background: green;
}

Answer 3

试试这个：

<强> HTML

<div class="box green"></div>
<input type="radio" id="radioOne" value="Y"/>
<label>
  Verified Yes <div class="box-green"></div>
</label> 

<强> CSS

.box-green {
  display:       inline-block;
  width:         1em;
  height:        1em;
  border-radius: 50%;
  background:    #00FF00;
}