ASP复选框长文本未对齐

Question

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

<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" />

Answer 1

你只需要创建一个<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>

Answer 2

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>

Answer 3

这不是最佳实践，但快速且有效的解决方案是覆盖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" />

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