Question

我为在ionic 4中正在开发的程序制作了一个问题清单，我制作了一些自定义框来包含问题和答案，并且该程序正常运行，响应迅速。但是，当我添加第二个问题时，盒子彼此重叠，我不知道为什么。

我尝试放置一些具有相对和绝对位置的自定义类，但是它根本不起作用。

<ion-grid>
<ion-row>
<ion-col size="12">
<div boxCuestionario>
  <div boxPregunta topper>
    <p preguntaText>Q1</p>
  </div>
 <ion-list listCustom>
 <ion-radio-group>
   <ion-item itemCustom>
     <p respuestaText>Ans1</p>
     <ion-radio slot="start" value="biff" checked></ion-radio>
   </ion-item>
   <ion-item itemCustom>
    <p respuestaText>Ans2</p>
    <ion-radio slot="start" value="griff"></ion-radio>
   </ion-item>
   <ion-item itemCustom>
    <p respuestaText>Ans3</p>
    <ion-radio slot="start" value="buford"></ion-radio>
   </ion-item>
 </ion-radio-group>
 </ion-list>                
 </div>
 </ion-col>
 </ion-row>
<ion-row>
<ion-col size="12">
<div boxCuestionario>
  <div boxPregunta topper>
    <p preguntaText>Q1</p>
  </div>
 <ion-list listCustom>
 <ion-radio-group>
   <ion-item itemCustom>
     <p respuestaText>Ans1</p>
     <ion-radio slot="start" value="biff" checked></ion-radio>
   </ion-item>
   <ion-item itemCustom>
    <p respuestaText>Ans2</p>
    <ion-radio slot="start" value="griff"></ion-radio>
   </ion-item>
   <ion-item itemCustom >
    <p respuestaText>Ans3</p>
    <ion-radio slot="start" value="buford"></ion-radio>
   </ion-item>
 </ion-radio-group>
 </ion-list>                
 </div>
 </ion-col>
 </ion-row>
</ion-grid>

我不知道为什么每次我放置两行或更多行时都会重叠。

这是盒子的css，BoxCuestionario，是所有容器，而boxPregunta是问题的容器：

[boxCuestionario]{
    position: absolute;
    width: 95%;
    height: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
    border-radius: 25px;
    background-color: #ffffff;
}
[boxPregunta]{
    position: relative;
    top: -20px;
    margin: auto;
    width: 95%;
    height: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
    border-radius: 20px;
    background-color: #ffffff;
}

不需要其他类（例如文本类），因为它只是字体大小和类似的东西。

这是它的图片，一个问题。 https://imgur.com/G8Q7RM4

这是问题，有两个或更多问题，它堆积了。 https://imgur.com/I0uHxBq

问题清单不在App的自然流程中

0 个答案: