web-dev-qa-db-ja.com

HTML入力を同じ行に揃える

誰かがフォーム入力を同じ行に揃える方法について簡単な解決策を与えることができますか？たとえば、フォームを構築しているときに何度も互いの上に揃えることができますが、私は2つ置くと別のテキストまたはボタンの横にある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>
htmlcssinputalignment
27
Ryan Stortz

Vertical-align cssプロパティで遊んでみましたか？

vertical-align:top;

そうすれば、すべてが一貫して見えるようになり、マージンをいじる必要がなくなります。

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

または

textarea,input.button{float:left;}

垂直的に挑戦した方法に応じてあなたの選択を取る

8
paulcol.

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

通常、display:inline-block;またはfloat:left;を使用できます。アイテムを上部または下部に配置しますか？

あなたの例では、入力タイプを閉じていません。type='button'である必要があります-アポがありません。

2
Mike Sav

float:leftテキストエリアへ

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

1
Rohan Patil
<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

確かに、CSSの純粋主義者は身動きが取れなくなりますが、確かに簡単です...

0
ShaneBlake

次のようなことができます（私の場合はうまくいきました）：

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