離子含量下離子卡的全寬

Question

我需要給離子卡一個完整的寬度。 這有效：

ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

但是我只需要限制ion-content 。 所以嘗試了這個。 但這是行不通的。 即它刪除了卡的整個寬度。 有什么線索嗎？

 ion-content>ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

html

<ion-header>
 <ion-card>
      <h2>Notifications Area1</h2>
  </ion-card>
</ion-header>

    <ion-content>
      <ion-card>
        <h2>Notifications Area2</h2>
      </ion-card>
    </ion-content>

注意：我不需要將整個寬度應用於ion-header卡。

Answer 1

這將是您的解決方案：刪除>並將其更改為blank space 。

這是有關為什么要使用blank space的一些說明，

<div> <p>元素元素，選擇<div>元素內的所有<p> <div>元素，

元件>元素<div> > <p>選擇所有<p>元素，其中該親本是一個<div>元素

在您的情況下，空白效果更好。

 ion-card{ display: flex; flex-direction: column; margin: 0 !important; background: blue; width: 500px; } ion-content{ background: green; } ion-content ion-card{ background: yellow!important; width: 100%; } 

 <ion-content> <ion-card> <h2 text-center margin-top>Notifications Area</h2> </ion-card> </ion-content> <ion-card> <h2 text-center margin-top>Notifications Area</h2> </ion-card> 

Answer 2

我對HTML和CSS的格式進行了一些修改。

的HTML

<div class="ion-content">
  <div class="ion-card">
   <h2 class="text-center margin-top">Notifications Area</h2>
  </div>
</div>

的CSS

.ion-content {
   display: flex;
   flex-direction: column;
   width: 100%;
   background: grey;
   height: 500px;
}



.ion-card {
    flex-basis: 100%;
}

h2 {
   color: blue;  
}

您可以在此處看到一個有效的示例。 https://codepen.io/Angel-SG/pen/aPpWVM

Answer 3

ion-content {

    ion-card {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-widht : 100% !important;
        margin: 0 !important;
    }
}

試試這個，我希望它能工作...！