CODEWITHSUNDEEP
htmlcss
Bertvan
Bertvan

Reputation: 5033

Align checkbox labels (web)

A picture says more than a thousand words?

screenshot

I would like the second (and consecutive) lines to be aligned with the first. Any ideas?

Html is 

<input><span>text</span>

Upvotes: 8

Views: 3849

Answers (2)

Narnian
Narnian

Reputation: 3908

I ran into the same things and solved it this way. The big problem was checkbox list items whose text took up multiple lines.

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; }

For a more detailed discussion see my post here: Aligning a List of Checkboxes with Text that Wraps

Upvotes: 0

bobince
bobince

Reputation: 536339

.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>

Upvotes: 13

Related Questions