对齐复选框标签（网页）

Question

一张图片说的千言万语？

我希望第二行（和连续行）与第一行对齐。有什么想法吗？

Html

<input><span>text</span>

Answer 1

.thing input { float: left; }
.thing label { display: block; margin-left: 2em; }

<div class="thing">
    <input type="radio" id="potato"/>
    <label for="potato">Text over multiple lines should be aligned properly...</label>
</div>

Answer 2

我遇到了同样的事情并以这种方式解决了。最大的问题是复选框列表项，其文本占用了多行。

<强> HTML

<div class="checkboxlist">
    <ul>
        <li>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="This is a checkbox option in an unordered list that is pretty long and ends u wrapping onto another line, but maintains alignment" />
        </li>
        <li>
            <asp:CheckBox ID="CheckBox2" runat="server" Text="This is yet another checkbox option in an unordered list that is pretty long and ends u wrapping onto another line, but maintains alignment" />
            <div>
                <br /> Here's some other info as well that isn't a part of the checkbox. The alignment for this works as well.
            </div>
        </li>
    </ul>
</div>

<强> CSS

div.checkboxlist ul li { margin: 7px 0px; }
div.checkboxlist ul li input { width: 15px; display: block; float:left;}
div.checkboxlist ul li label { padding-left: 28px; display: block; }
div.checkboxlist ul li div { margin-left: 28px; clear: both; font-size: .9em; }

有关更详细的讨论，请参阅我的帖子： Aligning a List of Checkboxes with Text that Wraps