Выравнивание входов html на одной строке

Может ли кто-нибудь дать простое решение о том, как выравнивать вводы форм в одной строке, например, много раз, когда я создаю форму, я могу заставить их выравниваться друг над другом, и это выглядит здорово, но если я поместил два входа, например 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>

Ответы

Ответ 1

Вы пытались играть с помощью свойства css с вертикальным выравниванием?

vertical-align:top;

Таким образом, все будет выглядеть последовательным, и вам не придется играть с полями.

Ответ 2

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

или

textarea,input.button{float:left;}

возьмите ваш выбор в зависимости от того, каким образом ваш вертикально оспариваемый

Ответ 3

Добавление vertical-align похоже на работает для меня:

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

Ответ 4

Обычно вы можете использовать display:inline-block; или float:left;. Вы хотите, чтобы элементы были смешаны сверху или снизу?

В вашем примере вы не закрыли тип ввода, он должен быть type='button' - вам не хватает аргументов.

Ответ 6

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

Конечно, это делает пуристы CSS извиваться, но это, безусловно, легко...

Ответ 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/