javascript - 对齐一组按钮和纹理

Question

我正在编写小型网站，它在纹理上方有一系列按钮。我想整理演示文稿，特别是我想将按钮与文本区域对齐。

到目前为止，我的 html 是:

<form action='/submit', method="GET">
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button1"></td>
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button2"></td>
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button3"></td>
    <td><INPUT TYPE=button onmousedown="myFunction()" value="Button4"></td>
    <td><INPUT TYPE=SUBMIT name="submit" value="Submit" style="float: right"></td> 
    <td><INPUT TYPE=Reset name="reset" value="Reset" style="float: right"></td>
    <Textarea id="ta" name="package" ROWS=100 COLS=111>{{package['text']}}</textareaa>
</form>

我希望所有按钮和文本区域都在左右边缘对齐，并且提交/重置按钮向右浮动。

我已经包含了我想要的快速绘图:

Answer 1

.form{
  height : 250px;
  Width  : 250px;
}
.form  :nth-child(6){
  float:right;
}
.btn{
  display:inline-block;
  width : 23%;
  height : 25px;
  background-color : lightgray;
  border : 1px solid black;
}

.textarea{
  width : 100%;
  height:200px;
  background-color : darkgray;
  border : 1px solid black;
}

<div class="form">
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="btn"></div>
  <div class="textarea"></div>
</div>