html - 在 Angular 指令的 HTML 模板的表格单元格的同一行上显示文本和按钮

Question

我目前实现了 Angular 搜索功能 here允许用户搜索类(class)。

这利用了 read-more directive显示描述和关键字的预览，并允许用户切换以查看更多文本。我将 查看更多 超链接转换为一个按钮，无论是按钮还是文本都出现在类(class)描述/关键字下方，我希望此切换显示在单词旁边而不是其上自己的线。

<div [innerHTML]="currentText"> </div>
<button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button>

我尝试过类似 wrapping them in divs and using display:inline 的解决方案

<div id="block_container">
    <div id="bloc1"> <div [innerHTML]="currentText"> </div> </div>
    <div id="bloc2">
     <button (click)="toggleView()" class="btn btn-dark btn-sm"> 
    <i [class.hidden]="hideToggle" [ngClass]="isCollapsed ? 'fa fa-plus': 'fa fa-minus'"> </i></button> </div>
</div> 

并尝试过display: inline-block ，除其他外，但无法弄清楚。

它位于表格单元格内或 Angular 模板的一部分是否存在问题？任何指针将不胜感激!谢谢!

Answer 1

如果您使用 inline 到子元素 ，请不要使用 display:flex; 到 #block_container #bloc1，#bloc2。

#bloc1, #bloc2
{
    display:inline;
}

查看代码:https://stackblitz.com/edit/angular-course-filter-pipe-vpax2x?file=src/app/app.component.css