我有一个按钮，我希望它与页脚完美定位答案

【问题标题】：I have a button which I want it to position perfectly with the footer我有一个按钮，我希望它与页脚完美定位
【发布时间】：2021-05-30 10:50:25
【问题描述】：

我有一个按钮，我希望它居中，但位置应该在页脚的右侧。我已经完成了页脚部分的 CSS，但按钮粘在底部。我希望它位于中心，就像我希望按钮向上移动一样，使其看起来位置完美：

截图如下：

我希望它像这样在中心：

这是我的 ReactJS 代码：

.footer__section {
    position: sticky;
    color: lightgray;
    display: flex;
    align-items: right;
    padding: 30px;
    bottom: 0;
    border-top: 1px solid gray;
}

.footer__section>form {
    flex: 1;
}

.chat__inputButton {
    position:absolute;
    right: 0;
    margin-right: 10px;
}

<div className="footer__section">
   <form>
      <button
         className="chat__inputButton"
         type="submit"
       >
       Send Message
       </button>
   </form>
</div>

【问题讨论】：

标签： css reactjs flexbox jsx

【解决方案1】：

.footer__section {
    position: sticky;
    color: lightgray;
    display: flex;
    align-items: right;
    justify-content:right;
    padding: 30px;
    bottom: 0;
    border-top: 1px solid gray;
    border: 1px red solid; // debug
}

.footer__section>form {
    flex: 1;
    display: flex;
    width: 100%;// <- 
    align-items: flex-end;
    justify-content: flex-end;
}

.chat__inputButton {
    margin-right: 10px;
}

<div class="footer__section">
         <form>
            <button
               class="chat__inputButton">Cancel</button>
            <button
               class="chat__inputButton"
               type="submit"
             >
             Send Message
             </button>

         </form>
    </div>

【讨论】：