ASP.NET 复选框文本未与复选框右对齐或左对齐答案

【问题标题】：ASP.NET Checkbox Text not aligned right or left to the CheckboxASP.NET 复选框文本未与复选框右对齐或左对齐
【发布时间】：2012-10-30 04:35:49
【问题描述】：

在新的 Visual Studio 2012 Webforms 模板中，我所有的 ASP.NET 复选框和单选按钮的顶部或底部都有文本。

是故意的！？我怎样才能像往常一样正确对齐文本？我尝试禁用主题并将 cssclass 设置为复选框，但没有任何改变。

找到的解决方案：我研究了 firebug 中的 html，似乎默认的 Microsoft CSS 已损坏（！） label { display: block; } 导致错误的对齐方式

【问题讨论】：

Visual Studio 的主题是什么？
深色主题。默认只有明暗；）
我猜只有 2012 年，对吧？ :(

标签： c# asp.net layout checkbox alignment

【解决方案1】：

我遇到了同样的问题。

我的 ASP.NET Web 窗体项目是使用 VS2012 创建的，并使用添加的默认模板和样式表。该问题存在于我创建的新页面/表单上。我的表单控件恰好位于 TABLE 单元格中。以下是我为解决此问题所做的工作：

创建了一个名为 CoreFrameworkTweaks.css 的新样式表，其中包含以下代码：

.checkbox 标签{ 显示：内联；左边距：3px；字体大小：1.0em； }
在我的母版页中引用了新样式表* AFTER * Site.css 被拉入
确保我的表单中的所有控件都使用<fieldset></fieldset>进行包装
在我的复选框控件中添加了 CssClass="checkbox" 参数

问题已解决。

【讨论】：

是的，最简单的解决方案就是将标签显示改为内联

【解决方案2】：

Site.css 有代码：

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

fieldset label.inline
{
    display: inline;
}

你需要在 Login.aspx 中找到 Checkbox 并将 CssClass="inline" 添加到 Label

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

【讨论】：

【解决方案3】：

在style.css 文件中搜索：

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

然后将其替换为：

label {
    font-size: 1.2em;
}

【讨论】：

使用 asp.net 4 默认模板时同样的问题

【解决方案4】：

它们上有一个TextAlign 属性。你可以在这里设置。

如果这没有任何区别，那么您一定是有一些CSS 导致了这个问题。

【讨论】：

Textalign 属性设置为右。没有什么变化。 CSS 是模板的默认值。将 css 样式注释掉也没有任何变化。
那是什么开发环境？只是好奇..无论如何，我可以看到您的复选框 HTML 没有明确添加 TextAlign="Right" 。你试过吗？....忽略我，只是注意到VS 2012 ...漫长的一天:)
默认来自什么模板？也许您可以用更多代码更新您的问题？
TextAlign="Right" 是默认值。也明确设置它不会改变它。您可以在屏幕截图中看到所有代码。
@zoidbergi - 我在屏幕截图中看到的是 - 我没有看到 TextAlign="Right " 在那里.. 我在右侧的属性中看到它，但您确认运行站点时生成的实际源吗？

【解决方案5】：

非常感谢您。我被这个问题困扰了很长时间！ 复选框和单选按钮都会出现问题。

您需要做的就是在文件夹 Content 中找到 site.css。找到以下内容：

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

替换成

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

【讨论】：

【解决方案6】：

这对我有用：

label {
        display: inline !important;
      }

【讨论】：

【解决方案7】：

这是样式问题。也许页面视口太小，导致您看到的结果。

如果在asp.net中设置属性没有帮助，那么肯定可以通过css解决。毕竟输出是好旧的html...

【讨论】：

是的，我研究了 firebug 中的 html，似乎默认的 Microsoft CSS 已损坏（！） label { display: block; } 导致错误对齐