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

Question

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

我当前的代码：

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

Answer 1

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

Answer 2

试试这个：

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

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

Answer 3

将提交按钮放在表单外，但使用我要属性

的表单引用表单


<div>

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

</div>

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

How to place my submit button bottom left relative to my form?

html

css

layout

alignment