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

Answer 2

将您的CSS更改为以下内容：

form > div > label {
    width: 24%;
    vertical-align: middle;
    display: inline-block;
}

form > div > div {
    width: 75%;
    display: inline-block;
}

Updated fiddle

Answer 3

你已经用你的css使标签浮动了 - 你还需要使表格输入向左浮动以使它们并排显示。为此，请添加以下CSS规则：

form > div > select{
 float: left;   
}

Answer 4

两个选项：

您可以将它们放在div中：

<div>
    <label for="title">Title</label>
    <select name="title">
        <option value="Mr" <?php if($contact["title"] == 'Mr') { echo "selected='selected'"; } ?>>Mr</option>
        <option value="Mrs" <?php if($contact["title"] == 'Mrs') { echo "selected='selected'"; } ?>>Mrs</option>
        <option value="Miss" <?php if($contact["title"] == 'Miss') { echo "selected='selected'"; } ?>>Miss</option>
        <option value="Ms" <?php if($contact["title"] == 'Ms') { echo "selected='selected'"; } ?>>Ms</option>
    </select>
<div>

http://jsfiddle.net/17h5da97/1/

或者你向右移除浮动：

form > div > div {
   margin: 0 0 0 0;
   width: 75%;
}

http://jsfiddle.net/17h5da97/4/

或者删除标签的填充：

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

http://jsfiddle.net/17h5da97/5/

Answer 5

这是因为你在标签上有填充：

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

由于标签和输入div的百分比加起来达到100％，这会中断宽度并使div下降。

尝试从其他两个区域获取宽度百分比，并将其添加到填充中以获得百分比填充：

form > div > label {
    width: 25%;
    float: left;
    padding-right: 5%;
}

输入div的宽度为70％。

像这样：http://jsfiddle.net/lee_gladding/17h5da97/7/

Answer 6

在标签部分

/*float: left; */

margin: 0 auto;

带标签的自适应HTML表单

6 个答案: