複選框和文本未對齊

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; 
}