我正在制作一些手风琴常见问题解答。当我在答案部分周围添加填充时，我的手风琴不会一直关闭。当我移除填充物时，手风琴工作正常。问题是我想要填充。如前所述，当移除填充物时，我的手风琴工作得非常好。当填充被添加回来时，折叠的答案仍然显示答案中的前几行文本。<!DOCTYPE html><html><head> <style> .accordion { font: 14px 'share tech mono'; text-align: right; text-transform: lowercase; letter-spacing: 1px; margin: 20px 0px; color: #fff; background: none; border: none; transition: 0.4s; } div.panel { margin: 10px 30px 20px 30px; padding: 40px; line-height: 170%; background: rgba(0, 0, 0, 0.3); display: block; max-height: 0; overflow: hidden; transition: 0.2s ease-out; } </style> <link rel="shortcut icon" href="HERE"> <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet"> <title>STICTION</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css"></head><div id="header"> <div class="h_title">stiction</div> <div class="h_menu"> <div class="h_top"></div> <div class="h_tabs"> <input id="htab1" type="radio" name="htabs" checked> <label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label> <input id="htab2" type="radio" name="htabs"> <label for="htab2"><span>OTHER LINKS</span> <b>/</b></label> <div class="h_tab1"> <div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br> <span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span> </div> </div> </script>
3 回答
杨__羊羊
TA贡献1943条经验 获得超7个赞
尝试添加
box-sizing: border-box;
在您的面板上。这应该使它所以padding是的一部分height。如果稍微改变了一些情况，您可能需要调整其他值。否则，您可以在关闭时将顶部和底部填充设置为 0，并在折叠时转换这些值。
添加回答
举报
0/150
提交
取消