如何对齐单行中的两个按钮？答案

【问题标题】：How to align two button in single row?如何对齐单行中的两个按钮？
【发布时间】：2022-01-13 16:47:09
【问题描述】：

这是我的代码：

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix modal-footer">
<div class="ui-dialog-buttonset">
<button type="button" class="btn btn-mini btn-info">Yes</button>
<button type="button" class="btn btn-mini btn-info">No</button>
</div>
</div>

我需要的是我的按钮以单行显示，中间有一个小空间。

但我是这样的：

如何解决这个问题？请帮忙。提前致谢。

【问题讨论】：

这能回答你的问题吗？ How to create two HTML buttons side by side
您问题中的代码实际上使两个按钮在单行中，即使使用引导类，所以可能还有其他影响布局的东西。你还有其他的 CSS 规则集吗？

标签： html css bootstrap-4

【解决方案1】：

我认为这是最简单的现代解决方案：

.flex {
  display: flex;
  gap: 16px;
}

<div class="flex">
   <button>Button 1</button>
   <button>Button 2</button>
</div>

【讨论】：

【解决方案2】：

在 .ui-dialog-buttonset 类的 css 中添加：

.ui-dialog-buttonset button {
    display: inline-block;
}
.ui-dialog-buttonset > button:last-child {
    margin-left: 16px;
}

【讨论】：

错过了差距，伙计；-)

【解决方案3】：

显示：弹性；或者显示：内联块；

【讨论】：