Angular Material Expansion Panel 一些<span>div 不对齐</span>

Question

我创建了Angular Material Expansion Panel ，我遇到了一些小问题，我添加了一些<span>它就像一个按钮，那个没有对齐，你可以理解 - 看看我的堆栈闪电战实时代码示例

（我使用了bootstrap-4 ）一个已经准备好导入到 style.css 就像@import '../node_modules/bootstrap/dist/css/bootstrap.css';

我的代码部分在这里

   <mat-expansion-panel (opened)="panelOpenState = true"
   (closed)="panelOpenState = false">
   <mat-expansion-panel-header>
      <mat-panel-title>
         <div class="d-flex flex-row bd-highlight ">
            <div class="p-2 mt-1 bd-highlight sg-txt-healbl">user_signup</div>
         </div>
         <div class="d-flex justify-content-center"  style="margin-left: 15rem;">
            <span  CLASS="p-2 mt-2 ml-5 csn-published " >Published</span>
         </div>
      </mat-panel-title>
      <mat-panel-description >
         <div class="d-flex flex-row-reverse bd-highlight">
            <div class="p-2 bd-highlight  ">
               <img src="assets/sg-img/sg-user-sm.png"  >
               <!--sm Profile section-->
            </div>
            <div class="p-2 bd-highlight"><img src="assets/sg-img/sg-user-sm.png"></div>
            <div class="p-2 bd-highlight"><img src="assets/sg-img/sg-user-sm.png"></div>
         </div>
      </mat-panel-description>
   </mat-expansion-panel-header>
   </mat-expansion-panel>
</mat-accordion>
<!--section-->
<mat-accordion>
   <mat-expansion-panel (opened)="panelOpenState = true"
   (closed)="panelOpenState = false">
   <mat-expansion-panel-header>
      <mat-panel-title>
         <div class="d-flex flex-row bd-highlight ">
            <div class="p-2 mt-1 bd-highlight sg-txt-healbl">user_signin_part</div>
         </div>
         <div class="d-flex align-items-center">error_part</div>
         <div class="d-flex justify-content-center"  style="margin-left: 15rem;">
            <span  CLASS="p-2 mt-2 ml-5 csn-published " >Published</span>
         </div>
      </mat-panel-title>
      <mat-panel-description >
         <div class="d-flex flex-row-reverse bd-highlight">
            <div class="p-2 bd-highlight  ">
               <img src="assets/sg-img/sg-user-sm.png"  >
               <!--sm Profile section-->
            </div>
            <div class="p-2 bd-highlight"><img src="assets/sg-img/sg-user-sm.png"></div>
            <div class="p-2 bd-highlight"><img src="assets/sg-img/sg-user-sm.png"></div>
         </div>
      </mat-panel-description>
   </mat-expansion-panel-header>
   </mat-expansion-panel>
</mat-accordion>
<!--section-->
<mat-accordion>
   <mat-expansion-panel (opened)="panelOpenState = true"
   (closed)="panelOpenState = false">
   <mat-expansion-panel-header>
      <mat-panel-title>
         <div class="d-flex flex-row bd-highlight ">
            <div class="p-2 mt-1 bd-highlight sg-txt-healbl">user_signin_part</div>
         </div>
         <div class="d-flex justify-content-center"  style="margin-left: 15rem;">
            <span  CLASS="p-2 mt-2 ml-5 csn-published " >Published</span>
         </div>
      </mat-panel-title>
      <mat-panel-description >
         <div class="d-flex flex-row-reverse bd-highlight">
            <div class="p-2 bd-highlight  ">
               <img src="assets/sg-img/sg-user-sm.png"  >
               <!--sm Profile section-->
            </div>
            <div class="p-2 bd-highlight"><img src="assets/sg-img/sg-user-sm.png"></div>
            <div class="p-2 bd-highlight"><img src="assets/sg-img/sg-user-sm.png"></div>
         </div>
      </mat-panel-description>
   </mat-expansion-panel-header>
   </mat-expansion-panel>
</mat-accordion>
<!--section-->

css

/*button section*/
 .sg-txt-error{
     color: #ee2824;
}
 span.csn-published {
     display: block;
     background: #50e3c2;
     width: 100px;
     height: 30px;
     text-align: center;
     line-height: 1rem;
     border-radius: 5px;
     color: white;
     font-size:0.8rem;
}
 span.csn-testing {
     display: block;
     background: #4a90e2;
     width: 100px;
     height: 30px;
     text-align: center;
     line-height: 1rem;
     border-radius: 5px;
     color: white;
     font-size:0.8rem;
}

Answer 1

在扩展概述-example.css 中：

mat-panel-title { width:100%;}
mat-panel-title .d-flex { width:100%; float:right;}
mat-panel-title .d-flex span {float:right; }

这是你要找的吗？