当显示组件reportdetails时，它显示在菜单下面？

Question

问题

第二个组件 - 表格html显示在菜单下面，但我需要它显示在菜单的右边。

我在Angular 7上工作，我有两个组件。

第一个组件是包含在左侧菜单中的报表组件，它是app.component中的路由器出口。

第二个组件是存在于reportdetails组件上的表格html，当点击链接菜单时生成。

第一组件报告包含菜单

<p>report-category works!</p>

<table *ngFor="let rep of reportlist">  

     <tr>



            <td>{{rep.reportCategory}}</td>       

    </tr>

    <tr *ngFor="let subrep of subreportlist">

        <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">



                <a href="/reportdetails?id={{subrep.reportID}}">



                        <i class="{{subrep.IconClass}}"></i>

                        <span class="title">{{subrep.reportName}}</span>

                    </a>

        </div>



       </tr>



</table>

第二，报表组件包含的表格显示在菜单下面，这是错误的。

我需要正确的是显示在菜单的右边，如下图所示。

reportdetails works!

 <p>reportdetails works!</p>

  <div>
<table class="table table-hover" >  
  <thead>  
    <tr>  

      <th>regulation</th>  
    </tr>  
  </thead>  
  <tbody>  
      <tr *ngFor="let rep of reportdetailslist">
        <td>{{rep.regulation}}</td>  
      </tr>



  </tbody>  
</table>  
<p>reportdetails works!</p>

      <div>

    <table class="table table-hover" >  

      <thead>  

        <tr>  



          <th>regulation</th>  

        </tr>  

      </thead>  

      <tbody>  

          <tr *ngFor="let rep of reportdetailslist">

            <td>{{rep.regulation}}</td>  

          </tr>



      </tbody>  

    </table>  

  </div>

fiddle链接如下。https:/jsfiddle.net015asjzv1

我努力

table{
float:right;
width:auto;
}

最后更新请看这里的链接

http:/www.mediafire.comviewwnptffqakjglkrecorrectdata.pngfile

它将表格从左到右移动，但我需要它的顶部旁边的菜单，所以我做什么

Answer 1

因此，就我目前所见，你有2个表由divs包装，这就是为什么他们显示为块(divs有显示：块;默认情况下)

另加

<div class='wrapper'>
  // You have to make sure only this divs are direct child of wrapper.
  // div table 1  || you can just remove the div and add table directly
  // div table 2  || as divs with no class dont add any value
</div>
// css
.wrapper {
  display: flex;
}

祝您好运。

你可以了解更多的显示灵活性 此处

注意：这也可能是父组件布局的问题，但修复方法是一样的。