Question

如何水平对齐表单？例如：

<form>
<input type="email" placeholder="example@ravvel.com">
<div> 
<input class="enter" type="submit" value="Send"/> 
</div>
</form>

会给出这样的盒子：

email
send

我希望它们以这种方式出现：

email send

Answer 1

删除div标签，如下所示：

<form>
<input type="email" placeholder="example@ravvel.com">
<input class="enter" type="submit" value="Send"/> 
</form>

Answer 2

简单方法：

<form> 
<input type="email" placeholder="example@ravvel.com"> 
<input class="enter" type="submit" value="Send"/>
</form>

更多风格的方式：

<form> 
<div style="float:left"><input type="email" placeholder="example@ravvel.com"></div> 
<div style="float:left"><input class="enter" type="submit" value="Send"/></div> 
</form>

Answer 3

摆脱你的DIV。你不需要它。

<form>
<input type="email" placeholder="example@ravvel.com">
<input class="enter" type="submit" value="Send"/> 
</form>

Answer 4

您可以为包含表单元素的每个float: left添加div样式。

Answer 5

将值为display的CSS属性inline添加到DIV：

#yourdiv
{
  display: inline;
}

Answer 6

嗯，简单地说 - 如果你在float:left元素上使用div，它应该水平对齐并让你继续前进。

<form>
    <input type="email" placeholder="example@ravvel.com" style="float:left;">
    <div> 
        <input class="enter" type="submit" value="Send" style="float:left;"/> 
    </div>
</form>

Answer 7

如果希望表单中的所有字段都对齐，则可以将display：inline作为CSS规则添加到包含的元素中。我通常喜欢使用段落标记来分隔每个标签+输入标签，或者一个无序列表。要更新您的示例：

<form>
  <ul>
    <li><input type="text" type="email" placeholder="example@example.com" /></li>
    <li><input type="text" type="submit" value="send" /></li>
  </ul>
</form>

<style type="text/css" media="screen">
  form ul {
    list-style:none;
  }
  form li {
    display:inline;
  }
</style>

这适用于您添加为新列表项的每个字段。

Answer 8

<input type="text"/>
<input type="submit"/>

输入元素是内联块，意味着它们总是在同一条线上，这就是为什么你有两条线，因为div元素是一个块元素，以便它能够与其他元素对齐在同一“线”中的元素，它必须浮动，或者不相对定位。

example

Answer 9

奇怪的是，在我的情况下，简单地删除'div'并没有帮助。我必须明确地将“float：left”放到每个输入中，以便将所有内容都放在一行中。希望它可以帮助陷入同样情况的人。

如何水平对齐表格？

9 个答案: