2014-02-16 42 views
3

我有一个复选框,其文本相当长,如下所示。我们不希望的一件事是将文本包装在复选框下方。我已经做了什么来解决这个问题是把空间。也不是那段文字是大胆的,以及:asp:CheckBox - 防止文本环绕复选框

 <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. 

有文本的方式不换行复选框下方,仍然有我需要的文本气魄?

请注意,我仍然希望文字可以包裹,但不要选中复选框。这意味着它应该包装在上一行的文本下面。

+0

你能告诉我们生成的html吗? – Amitd

+0

试试这个答案http://stackoverflow.com/questions/19891681/aspcheckbox-checkbox-and-text-are-not-on-the-same-line?rq=1 – Amitd

回答

2

的那一刻起,你有你的复选框以外的文字,你可以用spannowrap风格扭曲它:

<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是相同的。

+0

感谢Aristos。我确实希望文字能够包裹,但不是像现在这样在复选框下方。您提供的代码使得所有代码都在一行中,这不是我期待的效果。任何帮助,将不胜感激。 –

+0

@NatePet快速和简单的解决方案是将它添加到一个表... – Aristos

+0

Aristos,如何使用Div的。只是想知道为什么以下不起作用:

Option 1 - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions. Ample time will be provided for individual discussions during breaks and at the networking reception.

2

This link描述了一种解决方案。总之:

  • 不使用复选框文字
  • 而是使用一个额外的标签
  • 设置复选框风格float: left
  • 设置标签样式display: table
+0

不错,简单 –

0

我只是找到了一个解决方案:关键是要使用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; 
} 

内嵌表格也似乎在工作ķ。