ASP Checkbox 长文本未对齐答案

【问题标题】：ASP Checkbox long text is not alignedASP Checkbox 长文本未对齐
【发布时间】：2017-03-16 21:32:46
【问题描述】：

我正在使用一个文本很长的复选框。我想让两行中的文本对齐。也就是说，在两行中，文本应该从同一行开始。请帮帮我

<asp:CheckBox ID="cb1" Width="400px" runat="server" OnCheckedChanged="cb1_CheckedChanged" AutoPostBack="true" Text="This is very long This is very long This is very long This is very long This is very long This is very long" Value="cb1" />

【问题讨论】：

标签： html css asp.net checkbox checkboxlist

【解决方案1】：

asp:CheckBox 生成一个输入和一个标签。您可以将 css 添加到标签中。对于对齐，您必须为标签添加宽度。

label{width:200px;display:inline-block;vertical-align:top}

像这样添加 CSS

<asp:CheckBox ID="cb1" Width="400px" runat="server" CssClass="cb" Text="This is very long This is very long This is very long This is very long This is very long This is very long" Value="cb1" />

<style type="text/css">
    .cb label{width:200px;display:inline-block;vertical-align:top}
</style>

【讨论】：

是的，您必须将其添加到您的 css 文件中
是的..它正在工作。但问题是它影响了所有的复选框。如何将其限制为单个复选框？
谢谢.. 非常感谢

【解决方案2】：

这不是最佳实践，但快速且有效的解决方案是覆盖 Visual Studio 附带的引导模板。具体来说，你添加这个 css：

  .chkbx_inline_top label {
    vertical-align: top;
    display: inline!important;
  }

然后你在asp:checkbox组件中引用css类：

  <asp:CheckBox ID="foo" runat="server" CssClass="chkbx_inline_top" Text="bar" />

这将允许文本换行到下一行，而不是使用换行符。

【讨论】：

【解决方案3】：

您只需要创建一个<div> 容器并使用css 设置一个width。

.container{
  width:200px;
}

<div class="container">
  <input type="checkbox">
  <label>Long text Long text Long text Long text Long text Long text Long text</label>
</div>

【讨论】：

我可以用 asp:checkbox 解决吗？
同理。添加一个具有宽度的 div