Asp:CheckBox checkbox and text are not on the same line

Question

I can't seem to figure out how to get the checkbox and associated text to appear on one line. The text is very short so it doesn't seem to be a width issue. I tried setting display:inline on the control but when it's rendered, a span is added around the input and label and that has the display:inline. If I manually add the display:inline, using the resources view in Chrome, to the resulting label than it's fine. The problem is I don't know how to get the control to do this.

Thanks.

Underbodice

This behavior is common when mixing ASP.NET Web forms and Twitter Bootstrap. Are you using bootstrap or some other css framework? – Clostridium

Answer 1

You want to have display:inline applied to the <label> element that ASP generates to hold the label text, not the control itself. So, for example:

<style type="text/css">
    label { display: inline-block; }
</style>
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" />

Tacho

It seems the parent div isn't allowing this label to get set. #sign_up label { display: block; margin-bottom: 10px; color: #536376; font-size: .9em; text-align: left; } .chsli label { display: inline; // this is showing a strike-through } – Underbodice

This worked: .chsli label { display:inline-block!important; } – Underbodice

this worked for me: <asp:CheckBox TextAlign="Left" Text="blah" – Caravette