フォームフィールドの整列

今すぐHTMLフォームをコーディングして、テキストフィールドの右側のコメントフィールドを整列させるのに少し問題があります。フォームフィールドの整列

私はお互いに3つのテキストフィールドを持っています。私はコメントテキストフィールドをそれらの右側に揃えたいと思っています。iveはそれを正しくフローティングにしてから、インラインで上に移動するテキストそれはクラスを持っていないので、私は 'コメント'がテキストフィールドで浮動していないと言ってほしいと思います。

これを行う簡単な方法はありますか？

<style type="text/css"> 
    ![enter image description here][1]<!-- 
    body { 
background-color: #FFF; 
    } 

    #form { 
width:960px; 
background-color:#edf8ff; 
height:650px; 
    } 

    .gezza-form { 
width:894px; 
margin:0 auto; 
margin-top:20px; 
    } 

    .gezza-field { 
width:437px; 
height:75px; 
margin-bottom:10px; 
border: 1px solid #d9e7f1; 
    } 

    .gezza-comments{ 
width:437px; 
height:300px; 
float:right; 
margin-top:-80px; 
    } 

    --> 
    </style></head> 

    <body> 


    <div id="form"> 

    <form action="" class="gezza-form" method="post" > 
    First Name<br /> 
    <input name="firstname" type="text" class="gezza-field" /><br/> 
    Last Name<br /> 
    <input name="lastname" type="text" class="gezza-field" /><br/> 
    Email Address<br /> 
    <input name="email" type="text" class="gezza-field" /> 
    Comments<textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea> 
    </form> 


    </div><!-- close form -->

ここでは、[1]

を達成しようと何イムだ：http://i.stack.imgur.com/g3yO8.pngビュー画像が

出典

2012-02-09 Gezzamondo

次の2つのdivを作成することができます他の要素を保持し、それらを並べて配置する。

テーブルを使用してセルを結合して、コメントセクションを保持することができます。

出典

2012-02-09 12:42:10

そして、あなたが.gezzaフィールドを変更する場合：

.gezza-field { 
width:437px; 
height:75px; 
margin-bottom:10px; 
border: 1px solid #d9e7f1; 
float:left; 
}

出典

2012-02-09 12:42:09 joelkema

この作品はありません – Gezzamondo

フォームフィールドの整列

答えて

関連する問題