任何人都可以帮助我修复响应式 HTML 手风琴吗？

问题描述

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

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

.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.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>

解决方法

向 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.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>

,

.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.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,#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,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,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>

您好，我已经添加了代码。你需要将手风琴标题放在 span 标签中并给出宽度 95%。检查代码。