Question

我在div中包含了几个按钮，我想放在同一行。只有当某个值大于0时，才会显示其中两个按钮。我在div容器中添加display:inline-block，认为这会将所有包含的div放在同一行但不会。我还需要按钮向右浮动（因此容器div中的style="float:right。我也尝试在每个无法工作的按钮上放置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

中的所有元素

Stack Snippet

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

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

Answer 2

您的内部div（<div *ngIf="menu.itemNumber > 0">）仍然是块级元素。你需要给它display: inline-block，以便它与下面的按钮内联。

另外，请勿在包装器style上复制div属性。将样式合并为一个字符串：style="display:inline-block; float: right;"（假设您仍希望外部div为inline-block - 可能不需要这样做。

Answer 3

我还了解到，有时候，根据按钮内容或兄弟元素的大小，它们可能不在同一基线中，这意味着某些基线会高于其他基线，即使它们是并排的。修复基线问题的方法是在兄弟元素上使用特殊类型的溢出（如隐藏或自动）实施例：

div sibling-elements{
 overflow: hidden;
}

将两个div放在同一行，“内联”不起作用

3 个答案: