HTML：フォーム要素をレイアウトする正しい方法は？

これは、私は通常、同じ行のフォーム要素をレイアウトする方法である：HTML：フォーム要素をレイアウトする正しい方法は？

<div style="vertical-align: middle"> 
 
    Field: <input id="Text3" type="text" /><input id="Button3" type="button" 
 
     value="button" /> 
 
</div>

しかし、それは、ボタンを非常に良い見ていないと、入力テキストが整列しません（たとえ私が縦に並べてDIVでラップしたとしても）。

（CSSingのように）見栄えを良くするためにできることはありますか？

出典

2017-01-20 im_chc

あなたが求めていることを実行する方法はたくさんありますが、正解は1つだけです。あなたは[Bootstrap]（https://getbootstrap.com/css/#forms-inline）のようなフレームワークを使ってあなたのためのすべてのCSSを扱うことができます。また、HTML自体の構造を変更し、適切な ' Jake

はい、あなたのボタンと一緒に、多くの方法でボックスをスタイルすることができます。ちょうどいくつかのCSSを見て、あなたはあなたの方法です。また、私は今あなたが持っているインラインCSSの代わりに別のスタイルシートを使用します。

出典

2017-01-20 03:33:40

ボタンと同じ高さを持つテキストボックスを確保する方法を教えてください。 –

@im_chcちょうど正直言って、あなたはおそらく、すべてのブラウザで正確に同じサイズにすることはできません。しかし、いくつかのCSSでは、かなり近づけることができます。 http://codepen.io/anon/pen/vgxxpQ –

+1パッディングの設定は、AFAIKのように私が探していたもののようなものでした。 –

HTML：フォーム要素をレイアウトする正しい方法は？

答えて

関連する問題