コントロールを正しく調整する

Question

私が取り組んでいるウェブサイトの同じコントロールの外観を調整したいが、それはうまくいかないようだ。 コントロールを適切に配置するためにCSSを使用したいと思います。 チェックボックスをオンにし、ラベルを左揃えにして少し部屋を置いておきたい場合は、テキストボックスが表示されます。 また、すべてのテキストボックスを垂直に同じにしたい。 テーブルを使用せずにcssでどうすればいいですか？あなたの助けを事前に

おかげで、Laziale

Answer 1

CSS

div{margin-bottom:2px;} 
input[type="checkbox"]{display:block; float:left; margin-right:2px;} 
label{display:block; float:left; width:150px;} 

HTML

<div><input type="checkbox" /><label>Address</label><input type="text" /></div> 
<div><input type="checkbox" /><label>State</label><input type="text" /></div> 
<div><input type="checkbox" /><label>City</label><input type="text" /></div> 
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div> 
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div> 
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div> 

Answer 2

最も簡単な方法：幅を指定し、フロート：入力コンテナ（ラベル）http://jsfiddle.net/tCcff/2/

<style type="text/css"> 
label { 
    float: left;  
    width: 8em;  
} 

label.text { 
    width: 7em; 
} 
</style> 
<div> 
    <label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' /> 
</div> 
<div> 
    <label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' /> 
</div> 
<div> 
    <label> <input type='checkbox' /> Label here </label> <label class='text'>Text Three-----</label> <input type='text' /> 
</div> 

放置この記事はありますCSSベースのフォームレイアウトの参考資料：http://articles.sitepoint.com/article/fancy-form-design-css/3

Answer 3

真剣に、あなたが必要ですseテーブル。とにかくこれを達成しようとすると、より多くのhtmlとCSSが必要になります。

ドライブ全体がHTMLで表を使用しないようにするには、ページのレイアウトや、CSSを使用してページレイアウトを再配置したい（場所を移動する）などがあります。あなたのフォームがどのようにレイアウトされているかを再調整したいとは思っていません。