跨多个列设置输入和文本区域的样式(不带 div)

Question

如何设置以下标记的样式以允许所述的布局。

<form>
    <input name="one">
    <input name="two">
    <input name="three">
    <input name="four">
    <input name="five">
    <input name="six">
    <textarea></textarea>
</form>

要具有以下布局：

input    input   textarea
input    input
input    input

Answer 1

如果你使用textarea as first element那么你已经实现了

form{
    width:100%;
    display:table;
}
input{
  width:30%;
  display:inline-block;
}
textarea{
  width:33.33%;  
  float:right;
  display:inline-block;
}

<form>
    <textarea></textarea>
    <input name="one">
    <input name="two">
    <input name="three">
    <input name="four">
    <input name="five">
    <input name="six">    
</form>

Answer 2

如果你使用

Bootstrap 它会更容易

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="row">
    <div class="col-md-6">
    <input name="one">
    <input name="two">
    <input name="three">
    <input name="four">
    <input name="five">
    <input name="six">
      </div>
      <div class="col-md-6">
    <textarea></textarea>
    </div>
  </div>
</form>

Answer 3

我会使用div但你可以这样做

<form>
      <table>
        <tr>
          <td><input name="one"></td>
          <td><input name="four"></td>
          <td rowspan="3"><textarea></textarea></td>
        </tr>
        <tr>
          <td><input name="two"></td>
          <td><input name="five"></td>
        </tr>
        <tr>
          <td><input name="three"></td>
          <td><input name="six"></td>
        </tr>      
      </table>
    </form>

Answer 4

如果你不想使用div，就使用table。

td{
    display:block;
}

<form>
<table>
<th>
  <td><input name="one"></td>
  <td><input name="two"></td>
  <td><input name="three"></td>
</th>
<th>
  <td><input name="four"></td>
  <td><input name="five"></td>
  <td><input name="six"></td>
</th>
<th>
  <td><textarea></textarea></td>
</th>
</table>
    
</form>

Answer 5

    <!--Below is the inline css code with html... You can also separate it if nedded-->    
    <form style="float:left;width:100%">
        <div style="float:left;width:30%;height:auto">
            <input name="one" style="width:100%">
            <input name="two" style="width:100%">
            <input name="three" style="width:100%">
        </div>
        <div style="float:left;width:30%;height:auto">
            <input name="four" style="width:100%">
            <input name="five" style="width:100%">
            <input name="six" style="width:100%">
        </div>
        <div style="float:left;width:30%;height:auto">
            <textarea style="width:100%"></textarea>
        </div>
    </form>

Answer 6

这个怎么样？

form{
    position: relative;
}
input{
    display: inline-block;
    width: 35%;
}
textarea{
    position: absolute;
    right: 0;
    top: 0;
}
/*or*/
form{
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}

Answer 7

试试这个，使用表格

textarea
{
  height:100px
  
  }

<form>
  <table>
  <tr>
    <td><input name="one"></td>
    <td><input name="two"></td>
    <td rowspan=3><textarea></textarea></td>
    </tr>
    <tr>
     <td> <input name="three"></td>  
    <td><input name="four"></td>
   </tr>
    
    <tr>
      
    <td><input name="five"></td>
   <td> <input name="six"></td>
      </tr>
    
   
    </table>
</form>