html - 如何使文本输入和文本区域并排对齐？

Question

我有一个包含 4 个文本输入和 1 个文本区域的联系表单。

联系表单代码是这样的:

 <form class="contact_form"> 
    <input type="text" placeholder="Name"> 
    <input type="text" placeholder="Company">  
    <input type="email" placeholder="Email"> 
    <input type="text" placeholder="Contact No."> 
    <textarea placeholder="Your Enquiry"></textarea>
 </form>

当前的 CSS 是这样的:

 .contact_form input {
    display: block;
    margin-bottom: 15px;
    width: 44%;
 }

 textarea {
    float: right;
 }

问题:当我将 float 放在文本区域右侧时。它在上面留了一个空间，看起来像这样: http://i.stack.imgur.com/82urB.png

输出:我想要的输出必须如下所示: http://i.stack.imgur.com/98XNc.png

Answer 1

尝试这种方式:

<form class="contact_form"> 
    <div class="input-wrapper">
    <input type="text" placeholder="Name"> 
    <input type="text" placeholder="Company">  
    <input type="email" placeholder="Email"> 
    <input type="text" placeholder="Contact No."> 
    </div>
    <textarea placeholder="Your Enquiry"></textarea>
 </form>

 <style>
     .contact_form .input-wrapper {
         float: left;
         width: 44%;
         margin-right: 10px;
     }
     .contact_form input {
        display: block;
        margin-bottom: 15px;
        width: 100%;
     }

     textarea {
        float: left;
     }
 </style>