在同一行对齐 html 输入答案

【问题标题】：Aligning html inputs on same line在同一行对齐 html 输入
【发布时间】：2012-01-24 12:22:15
【问题描述】：

有人可以就如何在同一行对齐表单输入提供一个简单的解决方案，例如，很多时候，当我构建一个表单时，我可以让它们相互对齐并且看起来不错，但是如果我将两个输入（如 textarea/text）放在另一个文本或按钮旁边，我会得到垂直对齐差异。有没有办法在不摆弄边距和填充的情况下解决这个问题？

例如：

<style type='text/css'>
  form{
    display:inline;
  }
  textarea{
    font-size:25px;
    height:25px;
    width:200px;
  }
  input.button{
    height:25px;
    width:50px;
  }
</style>
<form>
  <textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>

【问题讨论】：

确保你没有 clear:left 某处

标签： html css input alignment

【解决方案1】：

您是否尝试过使用 vertical-align css 属性？

vertical-align:top;

这样一来，一切看起来都会保持一致，而且您不必玩弄边距。

【讨论】：

【解决方案2】：

textarea,input.button{display:inline-block;}

或

textarea,input.button{float:left;}

根据您垂直挑战的方式进行选择

【讨论】：

谢谢，但我可以让它们在同一条线上，只是当我这样做时，它们垂直位于不同的位置。无论如何，我都尝试了这两种方法，但没有任何区别。
你想要哪种对齐方式？顶部还是底部齐平？
另外 - 确保您有有效的文档类型，并将表单设置为块元素，因为您将获得更可靠的结果。

【解决方案3】：

添加vertical-align 似乎是work for me：

<style type='text/css'>
  form{display:inline;}
  textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
  input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>

【讨论】：

@RyanStortz：不能肯定。我在这里使用 Firefox 8.0。似乎也适用于 IE 9.0。（尽管在后者中 textarea 上有滚动按钮很难看，但对于默认添加它们的浏览器，您可能希望显式删除这些按钮。）
是的，它对我有用。我有一个简单的 js 函数，可以为每个换行符增加 textarea 的高度，所以这不是问题。
我遇到了同样的问题，vertical-align: top 对我有用，除了最后一个元素。我有一个选择、一个 div（由所选的 jquery 插件创建）、一个输入文本和一个输入类型=提交。控件全部对齐，除了按钮，它比其他控件低一些像素。
抱歉，我发现了我的问题，这是另一个 CSS 类设置了 margin-top: 10px。 :(

【解决方案4】：

您通常可以使用display:inline-block; 或float:left; 您希望项目在顶部还是底部对齐？

在您的示例中，您没有关闭输入类型，它应该是 type='button' - 您缺少一个 apos。

【讨论】：

【解决方案5】：

只需将float:left 提供给文本区域

http://jsfiddle.net/2qdJc/2/

【讨论】：

我真的很反对浮动，它们对我来说似乎很随机，但谢谢我想我现在可以让它工作了。

【解决方案6】：

<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

当然，这让 CSS 纯粹主义者感到不安，但它确实很容易......

【讨论】：

还有 HTML 纯粹主义者、JavaScript 纯粹主义者和一般的 Web 开发人员......
我喜欢这个想法，但是由于所有内容都被加载，我正试图离开这个页面的表格。
@Ryan：我明白。我知道我会投反对票。但是您确实要求简单，没有什么比用于对齐表单输入的简单表格更容易的了。但是，当您第一次决定嵌套表格时，请重新考虑设计。

【解决方案7】：

你可以做这样的事情（在我的情况下工作）：

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

这是一个演示：http://jsfiddle.net/gn3qx6w6/1/

【讨论】：

简单而漂亮的例子。谢谢。

【解决方案8】：

对我来说，我使用了一个 div 并将所有输入放入 div 并使用了 vertical-align:top;对于 div

<div style="vertical-align:top">
        <span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
        <span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
        <input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
    </div>

【讨论】：