为什么我的手风琴不能完全关闭？
我正在制作一些手风琴常见问题解答。当我在答案部分周围添加填充时，我的手风琴不会一直关闭。当我移除填充物时，手风琴工作正常。问题是我想要填充。
如前所述，当移除填充物时，我的手风琴工作得非常好。当填充被添加回来时，折叠的答案仍然显示答案中的前几行文本。
<!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>
MYYA3回答
-
杨__羊羊
尝试添加box-sizing: border-box;在您的面板上。这应该使它所以padding是的一部分height。如果稍微改变了一些情况，您可能需要调整其他值。否则，您可以在关闭时将顶部和底部填充设置为 0，并在折叠时转换这些值。
随时随地看视频慕课网APP
相关分类
JavaScript