html - 带标签的响应式 HTML 表单

Question

我正在使用这个 CSS 代码:

form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 0 0;
}
form > div > div {
  margin: 0 0 0 0;
}
form > div > label {
    width: 25%;
    float: left;
    padding-right: 10px;
}
form > div > div {
  width: 75%;
  float: right;
}
form > div > label {
    font-size: 90%;
}

input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea {
    width: 60%;
}

input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=password],
textarea,
select {
    height:35px;
    padding:5px;
    color:#F36F25;
    font-size:16px;
    border: 1px solid #F36F25;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
  outline: 0;
  border-color: #F36F25;
  font-weight:bold;
}

@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0; 
  }
  form > div > label {
      width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  form > div > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 100%; 
  }
}
@media (min-width: 1200px) {
  form > div > label {
    text-align: right;
  }
}

使用标签创建响应式 HTML 表单，它工作正常但我不确定如何使标签和表单元素水平内联，表单元素似乎显示低于标签

http://jsfiddle.net/17h5da97/

Answer 1

移除标签元素上的padding:

form > div > label {
    width: 25%;
    float: left;
    /* padding-right: 10px; */
}