Question

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

（我用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

IN扩展概述示例.css：

example.html

这是您要找的吗？

角材料扩展面板某些<span> div不对齐

1 个答案: