Question

我正在尝试在一行上显示2个表单框，在另一行下面显示另一个表单框。我尝试使用div的任何东西都无法将这两个字段分开。我甚至试图在它们之间插入 而没有运气。

这是我的html：

<div class="form-line">
  <input class="input-text" id="name-box" type="text" name="name" value="Name">
  <input class="input-text" id="mail-box" type="text" name="mail" value="Email">
</div>

CSS：

.input-text {
  padding-left: 3px;
  font-family: sans-serif;
}

.input {
  display: inline;
}

.form-line {
  padding-top: 5px;
  clear:both;
}

#name-box {
  float: left;
}

#mail-box {
  float: left;
}

您能告诉我如何在这些盒子之间放置10px吗？感谢。

Answer 1

您需要将input设为display:inline-block（在IE 8及以下版本中不起作用，除非您稍微破解它）：

input {
    display: inline-block;
    padding:0 5px;


    /** Just for IE <= 8 */
    *display:inline;
    *zoom:1;
}

这是working jsfiddle。

Answer 2

安排第一个右边的第二个：

.form-line>input{display:inline-block}
.form-line>input+input{margin-left:10px}

Answer 3

将保证金留给邮箱，这样你的邮箱就是

#mail-box {
  float: left;
    margin-left:10px;
}

如何在这些表格框之间填写一些填充文件？

3 个答案: