Html 单选按钮和同一行上的文本

我试图把一堆单选按钮放在一个表单中。每个都有一个标签，标签右侧的所有部分都应该是一个X（因此

class:pull right

）。出于某种原因，每次我添加一个新的单选按钮时，X会越来越靠近表单的中心。这是代码；请参阅下面的链接以了解其产生的内容。有人能解释一下发生了什么事/我如何修复路线吗？注意：每个连续的X都会移动额外的8px，这恰好是表单的边界半径；不确定这是否只是巧合

编辑：我尝试过的：将每一组输入/标签/p标记放在自己的行中，也包括span；两者都不起作用。我尝试过使用pull right类，但当我删除它时，X实际上会被发送到下面的下一行

<form style="border:2px black solid; border-radius: 8px; padding:5px;">

<input style="margin-left:5px;line-height:30px" id="labelA" type="radio" name="letter"   value="A" checked="true"></input>
<label for="labelA" style="font weight:normal">A</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>

<input style="margin-left:5px;line-height:30px" id="labelB" type="radio" name="letter" value="B" checked="true"></input>
<label for="labelB" style="font weight:normal">B</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>
<br>`

<input style="margin-left:5px;line-height:30px" id="labelC" type="radio" name="letter"   value="C" checked="true"></input>
<label for="labelC" style="font weight:normal">C</label>
<p class="pull-right" style="margin-right:5px;line-height:25px;">X</p>

</form>

A.
X


B
X

`
C
X

---

输出：

删除样式只是为了以简单的方式显示我所做的

一般来说，我不建议使用

pull right/left

，因为在调用类似

div class=“clear”/>

的命令之前，它会影响整个HTML

如果可能，只需使用

float

HTML

<form style="border:2px black solid; border-radius: 8px;">
<input id="labelA" type="radio" name="letter" value="A" checked="true" />
<span>A</span>
<span class="x">X</span>
<br>

<input id="labelB" type="radio" name="letter" value="B" checked="true" />
<span>B</span>
<span class="x">X</span>
<br>

<input id="labelC" type="radio" name="letter"   value="C" checked="true" />
<span >C</span>
<span class="x">X</span>

</form>

---

一些进一步的建议，我学到的一件事是，如果我在风格设计方面遇到问题，并且我在个别元素上干扰了风格，我很可能会想办法努力。尽量使CSS保持简单。：）

谢谢大家!！我怀疑右转与此有关。为了简单起见，还可以使用+1来删除label元素并仅使用text@pwerth

pull right

有它的用途，但在大多数情况下，它应该很少被使用，只有在浮动/填充/边框不起作用之后才使用。：）

.x {
    float:right
}