2

我正在尝试将标签：控件，标签：控件对齐 2 行。在此处输入图像描述

但是我的第二行中的文本如下图所示移动到了一点点。如何在第二行的同一行中对齐标签和控件？这些是通用形式，所以我不想在类中添加任何高度。任何帮助将不胜感激。

这是我的代码

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

2 回答 2

2

请在此处查看JsFiddle 演示

您必须用一个父级包装单行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;
}
于 2013-11-07T08:18:31.357 回答
2

添加一个同时包含.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 演示

于 2013-11-07T08:13:38.690 回答