ASP.NET Checkbox Text not aligned right or left to the Checkbox

问题

In the new Visual Studio 2012 Webforms Templates all my ASP.NET Checkboxes and Radiobuttons have the Text on top or on bottom.

Is the intended!? How can i align the text right as it always was? I tried disable theming and set the cssclass to checkbox but nothing changed.

Solution found: I researched the html in firebug and it seems that the default Microsoft CSS is broken(!) label { display: block; } causes the wrong aligment

enter image description here

回答1:

It is styling issue. Maybe the page viewport is too small and that results in what you see.

If setting properties in asp.net does not help, then it can definitely be solved by css. After all, output is good old html...

回答2:

I encountered the same issue.

My ASP.NET Web Forms project was created using VS2012 and uses the default templates and stylesheets that were added. The issue exists on a new page/form that I created. My form controls happen to reside in TABLE cells. Here is what I did to work around the issue:

Created a new stylesheet called CoreFrameworkTweaks.css that contains this code:

.checkbox label { display: inline; margin-left: 3px; font-size: 1.0em; }
Referenced the new stylesheet in my master page * AFTER * Site.css gets pulled in
Ensured all controls in my form were wrapped with <fieldset></fieldset>
Added the CssClass="checkbox" parameter to my checkbox control

Issue fixed.

回答3:

Site.css has code:

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display:  block;
}

fieldset label.inline
{
    display: inline;
}

you need find Checkbox in Login.aspx and add CssClass="inline" to Label

<asp:CheckBox ID="RememberMe" runat="server" EnableTheming="True" />
<asp:Label ID="RememberMeLabel" runat="server" AssociatedControlID="RememberMe" 
    CssClass="inline">RememberMe</asp:Label>

回答4:

In the style.css file go and search for:

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

then replace it with:

label {
    font-size: 1.2em;
}

回答5:

there is a TextAlign property on them. You can set it here.

If this doesn't make any difference then you must have some CSS causing the issue.

回答6:

Thank you so much for this. I was stuck with this problem for the longest time! The problem occurs for both checkboxes as well as radiobuttons.

All you need to do is find site.css in folder Content. Find the following:

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

and replace it with

label {
    /*display: block;*/
    font-size: 1.2em;
    font-weight: 600;
}

回答7:

this worked for me:

label {
        display: inline !important;
      }

来源：https://stackoverflow.com/questions/13315165/asp-net-checkbox-text-not-aligned-right-or-left-to-the-checkbox

标签

ASP.NET

layout

checkbox

alignment