谁能帮我修复响应式 HTML Accordion？

Question

我是一名初级 Web 开发人员，我正在开发这个网站，但我遇到了一个我自己似乎无法解决的问题。我做了一个手风琴，但是当我缩小网站时，标题文本似乎与下拉图标重叠。这里我附上了两个文本如何重叠的截图Screenshot 1，Screenshot 2。

我还附上了 HTML 和 CSS 的截图：HTMLCSS。

.accordion{
     width: 90%;
     max-width: 1000px;
     margin: 2rem auto;

 }
 .accordion-item{
     background-color: white;
     color: black;
     margin: 1rem 0;
     border-radius: 0.5rem;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
 }
 .accordion-item-header{
     padding: 0.5rem;
     min-height: 3.5rem;
     line-height: 1.25rem;
     font-weight: bold;
     display: flex;
     align-items: center;
     position: relative;
     cursor: pointer;
 }
 .accordion-item-header::after{
     content: "\002B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "\2212";
}
.accordion-item-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    
   
   
}
.accordion-item-body-content{
    padding: 1rem;
    line-height: 1.5rem;
    border-top: 2px solid;
    border-image: linear-gradient(to right,  #ffea31, #20944b)1;
   }

 <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    Echo Beach is where you spent the best vacations of your childhood: golden sandy beaches,
                    awesome arcades, zen tranquility and friendly faces. No one is quite sure why people stopped
                    coming but soon Echo Beach was a shell of its past days. You have answered the call to return to
                    Echo Beach once again and return its former glory with your building skills.
                </div>
            </div>

        </div>

        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S THE GOAL OF ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    To harvest wood, mine ore and learn skills so you can rebuild the town of Echo Beach so its
                    inhabitants return. Make friends, explore the depths and uncover the lost secret of Dr. Terra
                </div>
            </div>

Answer 1

将padding-right 添加到accordion-item-header 类。在下面的代码中，我添加了 2.5rem 作为 padding-right。

.accordion{
     width: 90%;
     max-width: 1000px;
     margin: 2rem auto;

 }
 .accordion-item{
     background-color: white;
     color: black;
     margin: 1rem 0;
     border-radius: 0.5rem;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
 }
 .accordion-item-header{
     padding: 0.5rem 2.5rem 0.5rem 0.5rem;
     min-height: 3.5rem;
     line-height: 1.25rem;
     font-weight: bold;
     display: flex;
     align-items: center;
     position: relative;
     cursor: pointer;
 }
 .accordion-item-header::after{
     content: "\002B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "\2212";
}
.accordion-item-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    
   
   
}
.accordion-item-body-content{
    padding: 1rem;
    line-height: 1.5rem;
    border-top: 2px solid;
    border-image: linear-gradient(to right,  #ffea31, #20944b)1;
   }

<div class="accordion">
        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    Echo Beach is where you spent the best vacations of your childhood: golden sandy beaches,
                    awesome arcades, zen tranquility and friendly faces. No one is quite sure why people stopped
                    coming but soon Echo Beach was a shell of its past days. You have answered the call to return to
                    Echo Beach once again and return its former glory with your building skills.
                </div>
            </div>

        </div>

        <div class="accordion-item">
            <div class="accordion-item-header">
                WHAT’S THE GOAL OF ECHO BEACH WHAT’S THE GOAL OF ECHO BEACH WHAT’S THE GOAL OF ECHO BEACH?

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    To harvest wood, mine ore and learn skills so you can rebuild the town of Echo Beach so its
                    inhabitants return. Make friends, explore the depths and uncover the lost secret of Dr. Terra
                </div>
            </div>

        </div>

Answer 2

.accordion{
     width: 90%;
     max-width: 1000px;
     margin: 2rem auto;

 }
 .accordion-item{
     background-color: white;
     color: black;
     margin: 1rem 0;
     border-radius: 0.5rem;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
 }
 .accordion-item-header{
     padding: 0.5rem;
     min-height: 3.5rem;
     line-height: 1.25rem;
     font-weight: bold;
     display: flex;
     align-items: center;
     position: relative;
     cursor: pointer;
 }
 .accordion-item-header::after{
     content: "\002B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "\2212";
}
.accordion-item-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    
   
   
}
.accordion-item-body-content{
    padding: 1rem;
    line-height: 1.5rem;
    border-top: 2px solid;
    border-image: linear-gradient(to right,  #ffea31, #20944b)1;
   }
   
   .accordion-item-header span {
    width: 95%;
}

<div class="accordion">
        <div class="accordion-item">
            <div class="accordion-item-header">
               <span> WHAT’S ECHO BEACH?</span>

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    Echo Beach is where you spent the best vacations of your childhood: golden sandy beaches,
                    awesome arcades, zen tranquility and friendly faces. No one is quite sure why people stopped
                    coming but soon Echo Beach was a shell of its past days. You have answered the call to return to
                    Echo Beach once again and return its former glory with your building skills.
                </div>
            </div>

        </div>

        <div class="accordion-item">
            <div class="accordion-item-header">
                 <span>WHAT’S THE GOAL OF ECHO BEACH?</span>

            </div>

            <div class="accordion-item-body">
                <div class="accordion-item-body-content">
                    To harvest wood, mine ore and learn skills so you can rebuild the town of Echo Beach so its
                    inhabitants return. Make friends, explore the depths and uncover the lost secret of Dr. Terra
                </div>
            </div>

        </div>

    <div class="gallery-items">
      <div class="gallery">
        <a target="_blank" href="NationalMall.jpeg">
          <img src="https://picsum.photos/200/300" alt="NationalMall" width="600" height="400">
        </a>
        <div class="description">National Mall in Washington DC</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="GrandCanyon.jpeg">
          <img src="https://picsum.photos/200/300
" alt="GrandCanyon" width="600" height="400">
        </a>
        <div class="description">GrandCanyon in Arizona</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="GettysBurg.jpeg">
          <img src="https://picsum.photos/200/300
" alt="Gettysburg" width="600" height="400">
        </a>
        <div class="description">Gettysburg in Pennsylvania</div>
      </div>

       <div class="gallery">
        <a target="_blank" href="GettysBurg.jpeg">
          <img src="https://picsum.photos/200/300
" alt="Gettysburg" width="600" height="400">
        </a>
        <div class="description">Gettysburg in Pennsylvania</div>
      </div>

       <div class="gallery">
        <a target="_blank" href="GettysBurg.jpeg">
          <img src="https://picsum.photos/200/300
" alt="Gettysburg" width="600" height="400">
        </a>
        <div class="description">Gettysburg in Pennsylvania</div>
      </div>
     
    </div>

    

    

    

    

    
  

</div>

你好，这里我已经添加了代码。您需要将手风琴标题放在跨度标签中并提供 95% 的宽度。检查代码。