html - 在 li 中对齐复选框和标签

Question

我在 li 中有一个复选框及其标签，如下所示：

<ul>
    <li><label for="first_checkbox_btn">First</label> <input type="checkbox" id="first_checkbox_btn" name="choice" value="" /></li>
    <li><label for="second_checkbox_btn">First</label> <input type="checkbox" id="second_checkbox_btn" name="choice" value="" /></li>
    <li><label for="third_checkbox_btn">First</label> <input type="checkbox" id="third_checkbox_btn" name="choice" value="" /></li>
</ul>

我要做的是将复选框与我的 li 内标签的最右侧对齐。我尝试使用 float right，但复选框与我的标签不在同一行。

请提供任何帮助。

Answer 1

我不知道它来自哪里，但是如果您将边距设置为0，它可以工作

input {
    float: right;
    margin: 0;
}

JSFiddle

Answer 2

我整理了一个快速的jsfiddle

如果我对您的理解正确，上述解决方案就可以了。基本上给每个输入<li> position:relative然后设置position:absolute; right:0。

当然，更多信息和代码将有助于弄清楚发生了什么。