在来自 Angular 指令的 HTML 模板的 table 单元格的同一行上显示文本和按钮

Question

我目前实现了 Angular 搜索功能 here，允许用户搜索课程。

这利用显示描述和关键字的预览，并允许用户切换以查看更多文本。我将 see more 超链接转换为按钮，无论是按钮还是文本都出现在课程描述/关键字下方，我希望此切换显示在单词旁边而不是单独一行。

<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>

并已尝试，等等，但无法弄清楚。

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

Answer 1

尝试用 1 行元素

将它们包裹在 table 中

<table>
   <tr>
      <td><div1>...</div></td>
      <td><div2>...</div></td>
   </tr>
</table>

Answer 2

如果您将 inline 用于 #bloc1, #bloc2.

，请不要将 display:flex; 用于 #block_container

#bloc1, #bloc2
{
    display:inline;
}

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

在来自 Angular 指令的 HTML 模板的 table 单元格的同一行上显示文本和按钮

Display Text and Button on same line in table cell from HTML Template for Angular Directive

html

css

html-table

css-tables

angular