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

Question

我是一名初级 Web 开发人员，我在这个网站上工作，但我遇到了一个我自己似乎无法解决的问题。我做了一个手风琴，但是当我缩小网站时，header 文本似乎与下拉图标重叠。在这里我附上了两张文字重叠的截图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,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: "[=11=]2B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "12";
}
.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

在 accordion-item-header class 中添加一个 padding-right。在下面的代码中，我添加了 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: "[=10=]2B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "12";
}
.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: "[=10=]2B";
     font-size: 2rem;
     position: absolute;
     right: 1rem;
     
    

}
.accordion-item-header.active::after{
    content: "12";
}
.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>

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

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

Can anyone help me with fixing a responsive HTML Accordion?

html

css

frontend

web-deployment

accordion