Question

有人可以提供一个关于如何在同一行上对齐表单输入的简单解决方案，例如，很多时候，当我构建一个表单时，我可以让它们在彼此之上对齐并且它看起来很合理，但是如果我将两个输入（如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>

Answer 1

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

vertical-align:top;

这样一切都会保持一致，你不必使用边距。

Answer 2

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

或

textarea,input.button{float:left;}

根据垂直挑战的方式选择

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

Answer 4

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

在你的例子中，你没有关闭输入类型，它应该是type='button' - 你错过了一个。

Answer 5

只需将float:left提供给textarea

即可

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

Answer 6

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

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

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

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

在同一行上对齐html输入

8 个答案: