html - 将两个 div 放在同一行， 'inline' 不起作用

Question

我有几个包含在 div 中的按钮，我想将它们放在同一行上。只有当某个值大于 0 时，才会显示其中两个按钮。我在 div 容器中添加了 display:inline-block 以为会将所有封闭的 div 放在同一行但它没有't。我还需要按钮向右浮动(因此 style="float:right 在容器 div 中。我还尝试在每个按钮上放置 display=inline这没有用。这是我的 HTML:

<div style="display:inline-block" style="float: right;">
    <div *ngIf="menu.itemNumber > 0">
        <button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
        <button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
    </div>
    <button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button> 
</div>

为什么按钮不显示在同一行上？

Answer 1

因为你有一个div，里面默认是block。将 display:inline-block 应用于父按钮 div 内的所有元素

堆栈片段

.main>* {
  display: inline-block;
}

<div class="main">
  <div>
    <button></button>
    <button></button>
  </div>
  <button></button>
</div>