html - 提交输入位置固定权利

Question

我正在尝试设置表单的样式。我希望我的 .form-main__submit 无论如何始终坚持在表格的右侧。如果我在提交按钮上使用绝对位置并添加 top: ..px 和 left ..px 它将不会响应网络。将输入按钮固定在表单右侧的最佳方法是什么？

到目前为止我的 CSS 代码:

.form-main {
    border: 2px solid black;
    display: inline-block;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    position: relative;
    border-color: lightgray;
    min-width: 60%;
}


.form-main__submit {
    position: absolute;
    border-radius: 100px;
    height: 50px;
    background-color: orange;
}



<div class="container">
      <div class="header">Sign in</div>
      <form class="form-main" action="#" method="post">
        <div>

          <label for="name">Name</label>
          <input class="form-main__input" type="text" name="name" id="name" value="" tabindex="1">
        </div>  
        <div>
          <label for="email">Email</label>
          <input class="form-main__input" type="text" name="email" id="email" value="" tabindex="2">
        </div> 
        <div>
          <input class="form-main__submit" type="submit" value="Submit">
        </div>
      </form>
    </div>

Answer 1

您可以使用 float 属性并将其值设置为 right。

.form-main__submit {
    float: right;
    border-radius: 100px;
    height: 50px;
    background-color: orange;
}