在同一行上对齐 html 输入 [英] Aligning html inputs on same line

问题描述

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

Can somebody give a simple solution as to how to align form inputs on the same line, for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?

例如:

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

推荐答案

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

Have you tried playing with the vertical-align css property?

vertical-align:top;

这样一切都会看起来一致，你就不必玩边缘了.

That way everything will look consistent and you won't have to play with margins.

这篇关于在同一行上对齐 html 输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！