复选框和文本未对齐

Question

在以下HTML中，由于文本太长，我的目标是将文本对齐到上一行文本的下方。

当我执行以下操作时，复选框在一行上，文本在下面。

我的目标是让复选框和下一个在同一行上。如果文字太长，文字应该包裹在前一行的下方。

<div style="float:left;margin-right:10px"> 
    <asp:CheckBox ID="chkOption1" runat="server"/> 
</div> 
<div style="float:left"> 
    <b><u>Option 1</u></b> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions. 
</div> 
<div style="clear:both"></div> 

下面是HTML代码如下所示：

<div style="float:left;margin-right:10px"> 
    <input id="chkOption1" type="checkbox" name="chkOption1" /> 
</div> 
<div style="float:left"> 
    <b><u>Option 1</u></b> - 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. 
</div> 
<div style="clear:both"></div> 

Answer 1

总结两个复选框，并在同一div元素中的文本。那么你有几个选择。

我还建议使用CSS而不是style=标签的样式。

这里有一个小提琴：http://jsfiddle.net/EHss7/1/

HTML：

<div class="option"> 
    <input class="chkbox" id="chkOption1" type="checkbox" name="chkOption1" /> 
    <div class="text"> 
     <div class="head">Option 1</div> - 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. 
    </div> 
</div> 

CSS：

.option{ 
    float: left; 
    display: block; 
} 

.chkbox{ 
    margin-right: 10px; 
    float: left; 
} 

.text{ 
    float: float; 
} 

.head{ 
    text-decoration: underline; 
    font-weight: bold; 
    float: left; 
}