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

问题：当我将浮动文件放到文本区域时。它在它上面留下一个空格，看起来像这样： 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>

Answer 2

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

DEMO

Answer 3

将css添加到

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

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

Answer 4

只需在输入字段

周围添加div即可

<强> FIDDLE DEMO

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

Answer 5

您是否尝试过将textarea放在第一位？

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

如何使textinput和textarea并排排列？

5 个答案: