单选按钮不按我的意愿工作

Question

对于我的项目，我有一系列单选按钮。这将像评级系统一样工作，他们在一个地方选择评级。

<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="1" />1</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="2" />2</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="3" />3</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="4" />4</label>
</div>   
<div class="float-left">
  <label><input id="Rating" name="Rating" type="radio" value="5" />5</label>
</div>   

制作的内容对我来说似乎很奇怪数字和按钮相距很远。

Answer 1

您似乎拥有所有 input标记的宽度样式。尝试将其重置为input[type="radio"]：

input[type="radio"] {
    width: initial;
}

之前：http://jsfiddle.net/Pgcmv/4/

之后：http://jsfiddle.net/Pgcmv/2/

UPD ：在这种情况下，初始版仅适用于Chrome 26，Firefox 16和Safari 5，并且在Opera 12和IE 10中不起作用。因此您需要设置一些适合的小值你的情况。

Answer 2

我只是将标签设置为向左浮动并将输入设置为向左浮动，然后将标签外部的输入用于修复它：

我的HTML：

<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="1" /><label> 1</label></div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="2" /> <label> 2</label></div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="3" /><label> 3</label> </div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="4" /><label> 4</label> </div>   
<div class ="float-left "><input id="Rating" name="Rating" type="radio" value="5" /><label> 5</label> </div>