如何水平对齐表单？

Question

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

<form>
<input type="email" placeholder="[email protected]">
<div> 
<input class="enter" type="submit" value="Send"/> 
</div>
</form>

将给出这样的框：

email
send

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

email send

Answer 1

删除 div 标签，如下所示：

<form>
<input type="email" placeholder="[email protected]">
<input class="enter" type="submit" value="Send"/> 
</form>

Answer 2

简单的方法：

<form> 
<input type="email" placeholder="[email protected]"> 
<input class="enter" type="submit" value="Send"/>
</form>

更有风格的方法：

<form> 
<div style="float:left"><input type="email" placeholder="[email protected]"></div> 
<div style="float:left"><input class="enter" type="submit" value="Send"/></div> 
</form>

Answer 3

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

<form>
<input type="email" placeholder="[email protected]">
<input class="enter" type="submit" value="Send"/> 
</form>

Answer 4

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

Answer 5

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

#yourdiv
{
  display: inline;
}

Answer 6

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

<form>
    <input type="email" placeholder="[email protected]" style="float:left;">
    <div> 
        <input class="enter" type="submit" value="Send" style="float:left;"/> 
    </div>
</form>

Answer 7

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

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

示例

Answer 8

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

<form>
  <ul>
    <li><input type="text" type="email" placeholder="[email protected]" /></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

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