Question

我有一个文本相当冗长的复选框，如下所示。我们不想要的一件事是将文本包装在复选框下面。我为解决这个问题所做的就是放置空格。也不是文本的那部分也是粗体：

     <asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ample time will be provided for individual discussions during breaks and at the networking reception.

有没有办法让文字不要复制在复选框下方，并且仍然需要我需要的文字的大胆？

请注意，我仍然希望文本包装但不要在复选框下方。这意味着它应该包含在前一行的文本下面。

Answer 1

从您的复选框之外的文字开始，您可以使用span和nowrap样式将其变形为：

<span style="white-space: nowrap;">
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Att ........
</span>

如果您将文字放在复选框的文字内，则可以使用style属性：

<asp:CheckBox runat="server" ID="chkOption1" style="white-space: nowrap;" Text="too long text" />

渲染html是一样的。

Answer 2

This link描述了一种解决方案。简而言之：

不要使用CheckBox文本
而是使用额外的标签
设置CheckBox样式float: left
设置标签样式display: table

Answer 3

我刚刚找到了解决方案：关键是使用display：table和display：table-cell。

这是asp.net代码：

<asp:CheckBox ID="..." runat="server" CssClass="mobilesubtitle" />

这里是生成的html代码（相关部分）：

<span class="mobilesubtitle">

  <input type="checkbox" name="..." id="...">

  <label for="...">text</label>

</span>

你需要在css中做的只有：

span.mobilesubtitle {
    display: table;

}
span.mobilesubtitle > input{
    display: table-cell;

}


span.mobilesubtitle > label {
    display: table-cell;
    vertical-align: top;
}

内联表似乎也有效。

asp：CheckBox - 防止文本包含在复选框下面

3 个答案: