Question

我试图在表单中放入一堆单选按钮。每个都有一个标签，标签右边一直是X（因此class:pull-right）。出于某种原因，每次我添加一个新的单选按钮时，X都会越来越多地朝向表单的中心。这是代码;请参阅下面的链接了解它的产生。有人可以解释一下发生了什么/如何修复路线？注意：每个连续的X移动一个额外的8px，恰好是形式的边界半径;不确定这只是巧合。

编辑：我尝试过的方法：将每组输入/标签/ p标签放在自己的行中，也可以跨越;既没有奏效。我尝试过使用右拉类，但是当我删除它时，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>

输出：http://imgur.com/zADCGRY

Answer 1

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

通常我不建议使用pull-right/left，因为它会在整个HTML中发生，直到您调用div class="clear" />之类的内容。

如果可能，请使用float。

<强> JSFiddle Demo

<强> 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

.x {
    float:right
}

一些进一步的建议，我学到的一件事是，如果我遇到问题造型问题，而且我在单个元素上设置了样式，我很可能会想方设法。尽量保持CSS简单。：）

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

1 个答案: