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

复选框和文本未对齐

1 个答案: