多个定位对齐的类被拉到一个div而不是它们各自的div

Question

http://jsfiddle.net/58arV/

我得到4个答案，其中一个是正确的，因为在“问题制作”组件中选择用户。

所以，我想用4个输入样式和4个右边的DIV作为一个复选标记“收音机”...所以如果用户点击框...那个框得到一个“复选标记”剩下的就是红色的“x”......

<div class="answer">
<input type="text" autocomplete="off" name="answer" id="answer-1" placeholder="Answer 1" class="form-control input" value="" />
<button type="radio" class="btn btn-success answer-type" style="" value="1">
<i class="glyphicon glyphicon-ok"></i>
<div class="left-check"></div>
</button>
</div>

问题是所有的框都被拉到第一个输入的右上角。

帮助？

Answer 1

您需要的是以下额外的CSS：

.answer { position:relative; }

更新示例：http://jsfiddle.net/58arV/1/

根据经验（可能符合CSS规范）：绝对元素相对于它最近的父亲是相对的还是绝对的。