单选按钮和文本在同一行

Posted 2023-03-27

【中文标题】单选按钮和文本在同一行

【英文标题】：Radio buttons and text on same line

【发布时间】：2014-10-05 15:46:31

【问题描述】：

我正在尝试将一堆单选按钮放在一个表单中。每个都有一个标签，标签的右边应该是一个 X（因此是class:pull-right）。出于某种原因，每次我添加一个新的单选按钮时，X 都会越来越靠近表单的中心。这是代码；有关它产生的内容，请参见下面的链接。有人可以解释发生了什么/我如何修复对齐方式吗？注意：每个连续的 X 都会移动一个额外的 8px，这恰好是表单的边框半径；不知道这是否只是巧合。

编辑：我尝试过的：将每组输入/标签/p标签放在自己的行中，并且还跨度；都没有工作。我尝试过使用 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>

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

【参考方案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 以简化删除标签元素并仅包含文本

@pwerth pull-right 有其用途，但在大多数情况下，它应该很少使用，并且只有在浮动/填充/边距不起作用之后。 :)