并排显示按钮而不是堆叠答案

【问题标题】：Display buttons side by side instead of stacked并排显示按钮而不是堆叠
【发布时间】：2020-12-18 18:15:19
【问题描述】：

我想并排显示 modalpopupextender 中的按钮，而不是堆叠在一起。下图是：

我希望并排删除和取消按钮。以下是我的代码：

     <div >
                                    <p style="width:200px;height:100px;margin-right:auto;margin-left:auto">
                                        <asp:Button ID="OkButton" runat="server"  Text="Remove"  CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/>
                                        <asp:Button ID="CancelButton"  runat="server" Text="Cancel" />
                                    </p>
   </div>

【问题讨论】：

使用 display: inline-block;
我试过了，还是一样。下面是代码：
stackoverflow.com/a/21376901/3143426 这个答案应该有帮助

标签： html css

【解决方案1】：

尝试使用 display flex

p {
  display: flex;
  align-items: center;
  justify-content: center;
}

p Button {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

检查一下 https://jsfiddle.net/L95j0kd7/1/

【讨论】：

立即工作，但按钮之间没有空间。我应该把按钮之间。
@Anjali，不要使用&nbsp;。为p 标记创建justify-content: space-between; 规则和width: 220px;，这将创建任何空间。