2

label : control、label: control を 2 行に揃えようとしています。ここに画像の説明を入力

しかし、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

.editor-fieldと の両方を含むコンテナーを追加し.editor-labelます。これがなければ、一緒に作業することは不可能ではないにしても非常に困難です。

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

このコンテナーにフロート要素を「含める」ようoverflow: hiddenにfloatします。

.editor-element {
    overflow: hidden;
}

jsFiddle デモ

于 2013-11-07T08:13:38.690 に答える
2

JsFiddleデモはこちらをご覧ください

1 つの行を 1 つの親でラップしてから、すべてをdivクリアする必要があります。floatdiv

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 に答える