0

I have the following code:

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

With the current code, the span where it says First Name is required has space in between it and the input field above. I need the space between them to be of 3px. How can I move the span up naturally and then add a margin-top:3px; to it?

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

4

6 回答 6

1

您可以通过执行以下操作从顶部输入中删除底部填充：

.input_classified:first-child {
   margin-bottom: 0;
}

然后像往常一样将 margin-top 添加到标签中：

.labelified {
   margin-top: 3px;
}
于 2013-07-05T14:28:23.073 回答
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

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 回答
0

如果您不想弄乱字段的边距，可以试试这个：

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

预览：http ://codepen.io/anon/pen/swytg

于 2013-07-05T14:13:28.950 回答
0

设置margin-bottom从.input_classified到0

于 2013-07-05T14:22:47.230 回答
0

您可以尝试使用负边距顶部来推动跨度，但是您可能还需要将其设为块或内联块

.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 回答