如何使两个单词成一行

Question

<div>Mandatory Documents</div>
<div>
  <button type="text" (click)="delete()" pButton icon="pi pi-times" label="Delete">
</button>
</div>

我有两个div标签。 强制性文件一词分为两行。我只需要将整个单词排成一行，并在其旁边的删除按钮

我应该使用哪种CSS？

Answer 1

您只需要使用“ display：inline-block”，默认情况下div元素是block。或者你也可以跨越我猜默认是内联的。我不知道你为什么说不破两个字？无论如何，您可以在单词之间添加 ，以免中断

<div style="display:inline-block">Mandatory&nbsp;Documents</div>
<div style="display:inline-block">
  <button type="text" (click)="delete()" pButton icon="pi pi-times" label="Delete">test</button>
</div>

我只是不明白为什么它会将单词分开？如果无法仅显示完整的布局，您可以提供屏幕截图吗？

Answer 2

在您的单词之间使用不间断的空格： 

要使两个div保持同一行，请在其父级上将display: flex与flex-direction: row一起使用。这是一个父容器太小的示例，但子容器正确放置在同一行上。

.group {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  max-width: 100px;
}

.group > div {
  border: 1px solid green;
  margin: 2px;
}

<div class="group">
  <div>Mandatory&nbsp;Documents</div>
  <div><button>Button</button></div>
</div>
<br>
<div class="group">
  <div>Mandatory Documents</div>
  <div><button>Button</button></div>
</div>