HTML 中的网格由于 <details>

Question

我想在我的页面上显示这个分数列表，开始做关于它的 html css，但已经遇到了一个我找不到其他人遇到的问题。一切正常，直到我打开详细信息，然后上面的 2 个

<p>

元素向下延伸了很多。

#ScoresList {
    margin: 0 0 0 25px;
}
#ScoresList li {
    margin: 20px 0;
}
.ScoreItem {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}
.ScoreItem__Score {grid-area: 1 / 1 / 2 / 2;}
.ScoreItem__Date {grid-area: 1 / 2 / 2 / 3;}
.ScoreItem__Details {grid-area: 2 / 1 / 3 / 3;}

<ol id="ScoresList">
    <li>
        <div class="ScoreItem">
            <p class="ScoreItem__Score">Score: <span>2500</span></p>
            <p class="ScoreItem__Date">On: <span>25/03/2024</span></p>
            <details class="ScoreItem__Details">
                <summary>More details</summary>
                <p>score</p>
                <p>tijd</p>
                <p>aantal fouten</p>
                <p>foutpercentage</p>
                <p>datum</p>
            </details>
        </div>
    </li>
</ol>

已关闭

已开通

Answer 1

我不太明白为什么我们使用

ol

和

li

元素进行网格布局，但如果这是任务，那么就没有必要将

li

中的元素放置到额外的 div 中。

#ScoresList {
    margin: 0 0 0 25px;
}
#ScoresList li {
    margin: 20px 0;
}
.ScoreItem {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    align-items: baseline;
}

<ol id="ScoresList">
  <li class="ScoreItem">
    <p class="ScoreItem__Score">Score: <span>2500</span></p>
    <p class="ScoreItem__Date">On: <span>25/03/2024</span></p>
    <details class="ScoreItem__Details">
      <summary>More details</summary>
      <p>score</p>
      <p>tijd</p>
      <p>aantal fouten</p>
      <p>foutpercentage</p>
      <p>datum</p>
    </details>
  </li>
  <li class="ScoreItem">
    <p class="ScoreItem__Score">Score: <span>2500</span></p>
    <p class="ScoreItem__Date">On: <span>25/03/2024</span></p>
    <details class="ScoreItem__Details">
      <summary>More details</summary>
      <p>score</p>
      <p>tijd</p>
      <p>aantal fouten</p>
      <p>foutpercentage</p>
      <p>datum</p>
    </details>
  </li>
</ol>