如何将我的提交按钮相对于我的表单放在左下角？答案

【问题标题】：How to place my submit button bottom left relative to my form?如何将我的提交按钮相对于我的表单放在左下角？
【发布时间】：2021-03-24 12:23:23
【问题描述】：

我的表单居中，我想将提交按钮放在表单的左下方。我该怎么做？

我当前的代码：

.bio {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.send {
  display: block;
  margin-left: 0;
}

<form>
  <input type="text" class="bio">
  <input type="submit" class="send" value="Send">
</form>

Here's what I want basically.

【问题讨论】：

如果 .bio 必须是长文本和换行符，请使用 textarea

标签： html css layout alignment

【解决方案1】：

将提交按钮放在表单外部，但使用表单的 Id 属性引用表单


<div>

<form action="..." method="..." Id="form-id">
.
.
.
</form>
  <button type="submit" form="form-id">Submit</button>

</div>

【讨论】：

【解决方案2】：

试试这个：

.bio{
display: block;
margin-left: 0;
margin-right: auto;
}

.send{
display: block;
margin-left: 0;
}

【讨论】：

【解决方案3】：

将form 居中，如下所示：

.form {
    margin: 0 auto;
    width: 400px;
}

.bio {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    background-color: #eee;
    border: none;
    border-radius: 4px;
    height: 120px;
    resize: none;
    padding: 8px;
}

.send {
    border-radius: 4px;
    background-color: red;
    color: white;
    border: none;
    padding: 4px 16px;
}

<form class="form">
<textarea class="bio" placeholder="Text...">
</textarea>
<input type="submit" class="send" value="Send">
</form>

【讨论】：