[英]Radio buttons and text on same line
I am trying to put a bunch of radio buttons in a form. 我正在尝试将一堆单选按钮放入表单中。 Each has a label, and all the way to the right of the label should be an X (hence the
class:pull-right
). 每个标签都有一个标签,并且标签右侧的所有位置都应该是X(因此,
class:pull-right
)。 For some reason, each time I add a new radio button, the X gets pulled more and more towards the center of the form. 由于某种原因,每次我添加一个新的单选按钮时,X都会越来越多地拉向表单的中心。 Here is the code;
这是代码; see link below for what it produces.
请参阅下面的链接以了解产生的结果。 Can someone please explain what is happening/how I can fix the alignments?
有人可以解释发生了什么/如何修复对齐方式? Note: each successive X is shifting by an additional 8px, which happens to be the border-radius of the form;
注意:每个连续的X会额外移动8px,恰好是表格的边界半径; not sure if this is just a coincidence.
不知道这是否只是巧合。
Edit: what I have tried: putting each set of input/label/p tags in its own row, and also span; 编辑:我尝试过的方法:将每组输入/标签/ p标签放在其自己的行中,并且也跨度; neither worked.
都不起作用。 I have tried playing with the pull-right class but when I remove it, the X's actually get sent to the next line below.
我曾尝试过右上角类,但是当我删除它时,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>
Output: http://imgur.com/zADCGRY 输出: http : //imgur.com/zADCGRY
Removed the styles just to show what I did in a simple manner. 删除了样式,只是为了以简单的方式显示我所做的事情。
Generally I would not recommend using pull-right/left
as it's effects will occur down the ENTIRE HTML until you call something like div class="clear" />
. 通常,我不建议您使用
pull-right/left
因为它的效果会沿整个HTML发生,直到您调用div class="clear" />
东西。
Just use float
if possible. 尽可能使用
float
。
HTML 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 CSS
.x {
float:right
}
Some further advice, one thing I have learned is if I am having issues styling stuff and I am jamming styles on individual elements, I am most likely thinking wayyy to hard on it. 一些进一步的建议,我学到的一件事是,如果我在样式方面遇到问题,并且我在单个元素上添加样式,那么我很可能会想办法加倍努力。 Try to keep CSS simple.
尝试保持CSS简单。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.