如何水平对齐表格？答案

【问题标题】：How can I horizontally align a form?如何水平对齐表格？
【发布时间】：2011-11-06 01:01:44
【问题描述】：

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

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

会给出这样的盒子：

email
send

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

email send

【问题讨论】：

标签： html css forms alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

-1。你刚刚让他的身影消失了，干得好。 :)。从ul 中删除display: none;。此外，请考虑完全删除该列表，因为 <input> 的默认样式是 display: inline;
我删除了 -1 但请注意，您的解决方案仍然（尽管有效且可接受）不是正确的解决方案。根本不需要ul。请参阅我的第一条评论。
是的，但如果您希望稍后添加更多字段和标签，这更容易使用。这绝对不是最语义化的解决方案，但它比自己留下输入标签要好。 Fieldset 绝对是最好的包装器。
是的，标签可以充当自己的包装器而不是列表项（将它们设置为块，它们是野兽）。
这里不要进行语义辩论，但通常最好保留一个标签标签以仅包含文本，并使用 for 属性将其连接到字段。否则，屏幕阅读器之类的东西可能无法解释标签标签的含义。为内容的内容编写您的 html，尽可能少地关注外观。 CSS 是展示之王。

【解决方案3】：

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

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

example

【讨论】：

【解决方案4】：

像这样删除 div 标签：

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

【讨论】：

【解决方案5】：

简单的方法：

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

【讨论】：

更清晰，更紧凑。那可能有什么问题？你以为你的做事方式是唯一的好方法而感到羞耻。
听说过内容和样式的分离吗？内联样式可能仅适用于内联和其他非常非常狭窄的案例列表，这不是其中之一。
另外，由于<input>s 默认是内联的，float 不是必需的。
我当然听说过。但他有一个只有两个输入的小表格。为两个 DIV 构建一个新样式表（如果他还没有一个）是一种很好的形式，但几乎没有必要。
我不同意，对不起。而且我认为传给新的 Web 开发人员是一种不好的做法，因此我的 -1 代表。

【解决方案6】：

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

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

【讨论】：

【解决方案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>

【讨论】：

-1 没有内联样式。此外，由于您没有浮动 div 本身，这也会造成麻烦，这是问题的根源。一个更简单的解决方案是完全摆脱它。

【解决方案8】：

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

#yourdiv
{
  display: inline;
}

【讨论】：

【解决方案9】：

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

【讨论】：