簡單的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個文本輸入，然後在窗體的右上角有textarea。所以輸入和textarea然後並排？

這有道理嗎？

Answer 1

你需要做一些調整，您的標記，添加兩個div爲左，右列會使事情更容易：然後使用一些簡單的CSS

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

，您可以創建兩個列效果：

：

form { 
    position: relative; 
} 

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

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

爲了讓他們沒有您的標記使用<br />標籤垂直顯示然後使用您輸入正確的CSS樣式