Question

我正在尝试将一些输入元素（~7）放在同一行中。

我有以下代码：

<form>
  <b> One </b>
 <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>
<form>
  <b> Two </b>
  <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>
<form>
  <b> Three</b>
  <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>

问题是每个输入的每个输入都有自己的行，而不是在同一行。

编辑：另外，我希望以这种方式在空间中输入元素将理解整行。我能做到吗？

Answer 1

更改显示，删除内嵌样式。示例：http://jsfiddle.net/ys1Lgj7e/

form {
    display:inline-block;
}

Answer 2

将每个表单标记设置为＆＃39; display：inline;＆＃39;

在那个html文件中：

<style>
form {
    display: inline;
}
</style>

或者在你的css文件中：

form {
    display: inline;
}

或每个标签：

<form style="display: inline;">

Answer 3

您的输入元素应该共享相同的形式，您的样式可以修改和放大。放入CSS，这将显着简化您的代码。

这是一个有效的例子：

http://jsfiddle.net/u4utpu6c/

HTML

<form>
<input type="number" />
<input type="number" />
<input type="number" />
</form>

CSS

input {
display: inline;
width: 5%; 
vertical-align:top;
}

HTML / input元素在同一行中

3 个答案: