シンプルなCSSのフォームのレイアウト

Question

私は、このHTML構造を持っている：

<form id="signUpForm" action="login.php" method="post"> 
    <h3>Please enter your details below:</h3> 
    <br /> 

    <p>Name: </p> 
    <input id="name" name="name" type="text"></input> 
    <br /> 

    <p>Email: </p> 
    <input id="email" name="email" type="text"></input> 
    <br /> 

    <p>Company: </p> 
    <input id="company" name="company" type="text"></input> 
    <br /> 

    <p id='required'>* All fields are required</p> 

    <p>Enquiry Details</p> 
    <textarea></textarea> 

    <input id="signUpSubmit" type="submit" value="Send"></input> 
</form> 

この形式は、HTMLのdiv要素の下にあるが、div要素は、フロートがあります。それに残され、そのdiv要素とフォームが並んで座ります。私がしたいことは、3つのテキスト入力を垂直方向に持っていて、フォームの右上にテキストエリアがあることです。入力とテキストエリアが並んでいますか？

それは意味がありますか？

Answer 1

あなたは左と右の列のための2つのdivを追加すると、物事がはるかに簡単になるだろう、あなたのマークアップにいくつかの調整を行う必要があります。

<form> 
    <div class="left-column"> 
     <label for="name">Name: </label> 
     <input id="name" name="name" type="text"/> 

     <label for="email">Email: </label> 
     <input id="email" name="email" type="text"/> 

     <label for="company">Company: </label> 
     <input id="company" name="company" type="text"/> 
    </div> 
    <div class="right-column"> 
     <label for="ta">Enquiry Details: </label> 
     <textarea id="ta" name="ta"></textarea> 
    </div> 
</form> 

そして、いくつかの簡単なCSSを使用して、次の2つの列の効果を作成することがあります。

それらをあなたのマークアップで <br />タグを使用せずに縦に表示することを可能にするために、あなたの入力に正しいCSSスタイルを使用して次に

form { 
    position: relative; 
} 

form div.left-column { 
    position: absolute; 
    width: 50%; 
    left: 0; 
} 

form div.right-column { 
    position: absolute; 
    width: 50%; 
    right: 0; 
} 

：

form input, form label { 
    float: left; 
    clear: left; 
}