0

次のコードがあります。

<div class="each_new_field">
                <label class="labelified" for="whatver">First Name:</label>
                <input type="text" class="input_classified mr_missing_field_checker" name="first_name" id="first_name">

            </div>
  <span class="field_check">First Name is required</span>
  <br />
  <div class="each_new_field">
                <label class="labelified" for="whatever2">Last Name:</label>
                <input type="text" name="last_name" id="a" class="input_classified">
            </div>

.input_classified {
    border: 1px solid #000;
    color: #807C7C;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 5px 10px;
    transition: background 0.5s ease-in-out 0s;
    width: 260px;
}
.labelified {
    color: #4C5157;
    float: left;
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin-top: 5px;
    width: 160px;
}
.field_check {
    color: #FF6600;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    margin-left: 160px;
}

現在のコードでは、First Name が必要であると書かれているスパンと、上記の入力フィールドの間にスペースがあります。それらの間のスペースは3pxにする必要があります。スパンを自然に上に移動してから、margin-top:3px; を追加するにはどうすればよいですか? それに？

http://codepen.io/anon/pen/pFAzg

4

6 に答える 6

1

あなたのhtmlでこのようなことを試すことができます

<div class="each_new_field">
<label class="labelified" for="whatver">First Name:</label>
<input type="text" class="input_classified mr_missing_field_checker" name="first_name"  id="first_name">
      <br>
<span class="field_check">First Name is required</span>
</div>
于 2013-07-05T15:46:40.713 に答える
0

負の margin-top を使用してスパンを押し上げることができますが、ブロックまたはインライン ブロックにする必要がある場合もあります。

.field_check {
    display: inline-block; /* don't remember if you need this, try without first */
    margin-top: -5px; /* adjust this as you need */
}
于 2013-07-05T14:05:07.153 に答える
0

フィールドのマージンを台無しにしたくない場合は、次のことを試してください。

.field_check {
    top: -10px;
    position: relative;
}

プレビュー: http://codepen.io/anon/pen/swytg

于 2013-07-05T14:13:28.950 に答える
0

～を設定margin-bottomする.input_classified0

于 2013-07-05T14:22:47.230 に答える
0

Position:relative それを簡単にすることができます:) 

   .labelified {
        color: #4C5157;
        float: left;
        font-family: "Open Sans",Arial,Helvetica,sans-serif;
        font-size: 12px;
        margin-top: 5px;
        width: 160px;
        position:relative;/*  ... */
        top:3px;           /* move 3 pixel down area where it's displayed */
    }
于 2013-07-05T14:58:07.453 に答える