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的一些解释，

element元素<div> <p>选择<p>元素内的所有<div>元素，

element> element <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;
    }
}

尝试这个，我希望它能起作用...！

离子含量下离子卡的全宽

3 个答案: