提交输入位置固定右答案

【问题标题】：submit input position fixed right提交输入位置固定右
【发布时间】：2019-11-26 01:37:47
【问题描述】：

我正在尝试设置表单样式。无论如何，我希望我的 .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>

【问题讨论】：

你在.form-main__submit上试过right: 0吗？

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果你使用bootstrap，你可以试试这个

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>




<div class="container">
      <div class="header">Sign in</div>
      <form class="form-main col-md-6 col-sm-6" 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>

【讨论】：