Html 如何使textinput和textarea并排对齐？

我有一个包含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>

问题：当我将一个浮点值放在文本区域的右边时。它在其上方留下一个空间，如下所示：

输出：我想要的输出必须如下所示：

尝试以下方法：

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

.contact_表单.输入包装器{
浮动：左；
宽度：44%；
右边距：10px；
}
.联系表格输入{
显示：块；
边缘底部：15px；
宽度：100%；
}
文本区{
浮动：左；
}

将css添加到

textarea {
    float: right;
    margin-right:1100px;
    margin-top:-170px;
 }

它将为您提供输出图像中显示的结果。

HTML

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

---

只需在输入字段周围添加一个div

.contact_form div {
    float:left;
    width: 44%;
}
.contact_form input {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}
textarea {
    margin-left:10px;
}

---

你试过把文本区域放在第一位吗

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

另外，将浮点应用于输入容器hi Bindiya，感谢您的回复。你的答案有效。。只是一个后续问题。。你认为在里面放一个div可以吗？是的，它完全可以，表单只提交它的输入类型控件。在任何东西上使用div都可以。除了答案之外，确保包含所有这些内容的外部div应该有CLAFIX，否则，它会把它后面的每一个元素都搞得一团糟up@C-链接任何有意义的内容。

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