对齐一组按钮和纹理

Question

我正在写一个小网站，它在纹理上面有一系列按钮。我想对演示文稿进行整理，特别是我想将按钮与textarea对齐。

到目前为止，我的HTML是：

msbuild.exe

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

我已经快速绘制了我喜欢的内容：

Answer 1

我假设右边距和左边距相同。在这种情况下，将整个内容包装在div中，设置css样式，display：inline-block和text-align：center。这将使div在中心（水平）对齐。现在相应地设置宽度的大小（假设你将它设置为80％宽度，那么它将在左侧和右侧留下10％的空间。）

使用float：left或right相应地设置按钮的位置。

Answer 2

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