Выравнивание вводов html на одной строке - PullRequest
Новая
       62

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

27 голосов
/ 20 декабря 2011

Может кто-нибудь дать простое решение о том, как выровнять входы формы в одной строке, например, много раз, когда я строю форму, я могу заставить их выравниваться друг над другом, и это выглядит звучащим, но если я помещаю два ввода, например текстовую область / текст, рядом с другим текстом или кнопкой, я получаю вертикальное выравнивание различия. Есть ли способ исправить это, не вмешиваясь в поля и отступы?

например: 

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

Ответы [ 7 ]

33 голосов
/ 20 декабря 2011

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

vertical-align:top;

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

8 голосов
/ 20 декабря 2011 
textarea,input.button{display:inline-block;}

или 

textarea,input.button{float:left;}

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

3 голосов
/ 20 декабря 2011

Добавление 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>
2 голосов
/ 20 декабря 2011

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

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

1 голос
/ 20 декабря 2011

Просто дайте float:left текстовой области

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

0 голосов
/ 30 сентября 2014

Вы можете сделать что-то вроде этого (сработало в моем случае): 

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

0 голосов
/ 20 декабря 2011 
<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

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

...