如何水平对齐表格？

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

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

Answer 5

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

Answer 6

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

#yourdiv
{
  display: inline;
}

Answer 7

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

<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 8

如果希望表单中的所有字段都对齐，则可以将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 9

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

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

例