Question

I made a CheckboxList and it will not line up. I don’t see any way to control the generated HTML. Right now, the check boxes do not align due to the widths of the <td> of each checkbox label being an automatic width. How can I set the width of this and make all the labels and checkboxes appear in two vertical aligned columns?

My code is simple:

<div style="text-align: center;">
    <p>
    Here you will tell..
    </p>
    <asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
    <br />
    <input type="button" id="next_3" value="Next Page" />
</div>

And here is a screen shot

Answer 1

You can have it contained within another <div> that does left-aligning like so:

<div style="text-align: center;">
    <p>Here you will tell..</p>
    <div style="text-align: left; width: 50%; margin: auto;">
        <asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
    </div> 
    <input type="button" id="next_3" value="Next Page" />
</div>