css控制对齐问题

Question

我正在尝试将label：control，label：control对齐为2行。

但是我的第二行中的文字移动到右下方，如下图所示。如何在第二行的同一行中对齐标签和控件？这些是通用表单，所以我不想添加任何高度添加到类。任何帮助都将受到高度赞赏。

Here is my Code

<div class="editor-label"><label for="DocumentSignature">This is a test label with big text below and below</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Document Signature Services Request URL field is required." id="DocumentSignature" name="DocumentSignature" type="text" value=""> 
<span class="field-validation-valid" data-valmsg-for="DocumentSignature" data-valmsg-replace="true"></span></div>

<div class="editor-label"><label for="DealSummary">This is next div text which moved to right</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Deal Summary Template URL field is required." id="DealSummary" name="DealSummary" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="DealSummary" data-valmsg-replace="true"></span></div>


.editor-label {
    max-width: 150px;
    font-weight: 200;
    font-size: 14pt;
    letter-spacing: 0.01em;
    line-height: 22pt;
    float: left;
    display: block;
    }

.editor-field {
    padding-bottom: 10px;
    line-height: 22pt;
    font-size: 10pt;
    clear: right;    
}
.label {
    width: 180px;
    display: block;
    text-align: right;
    margin-right: 15px;
}

Answer 1

添加一个包含.editor-field和.editor-label的容器。如果没有这个，那么即使不是不可能也很难一起工作。

<div class="editor-element">
    <div class="editor-label">...</div>
    <div class="editor-field">...</div>
</div>

使此容器“包含”浮动元素，因此要么添加overflow: hidden，某种float或clearfix：

.editor-element {
    overflow: hidden;
}

jsFiddle Demo

Answer 2

请参阅此处JsFiddle Demo

您必须使用一个父div换行单行，然后清除该float处的所有div。

HTML：

<div class='single_row'>
    <div class="editor-label"><label for="DocumentSignature">This is a test label with big   text below and below</label></div>
    <div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Document Signature Services Request URL field is required." id="DocumentSignature" name="DocumentSignature" type="text" value="" /> 
    <span class="field-validation-valid" data-valmsg-for="DocumentSignature" data-valmsg-replace="true"></span></div>
</div>

<div class='single_row'>
    <div class="editor-label"><label for="DealSummary">This is next div text which moved to right</label></div>
    <div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Deal Summary Template URL field is required." id="DealSummary" name="DealSummary" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="DealSummary" data-valmsg-replace="true"></span></div>
</div>

CSS：

.editor-label {
    max-width: 150px;
    font-weight: 200;
    font-size: 14pt;
    letter-spacing: 0.01em;
    line-height: 22pt;
    float: left;
    display: block;
    }

.single_row{ clear:both;}

.editor-field {
    padding-bottom: 10px;
    line-height: 22pt;
    font-size: 10pt;
    clear: right;    
}
.label {
    width: 180px;
    display: block;
    text-align: right;
    margin-right: 15px;
}