我正在html中制作一种嵌套折叠功能，但我想知道如何在"塞尔达播放列表"；按钮正下方。似乎什么都不起作用，只是看起来超级bug。我已经改变了位置，尝试了左、上、下和右功能，但它仍然在角落里被窃听。此外，如果有一种方法可以将两个元素移动到一起，那就更好了。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<button style="position:absolute; left:90%; top:34%;" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Zelda Playlist
</button>
<div class="collapse" id="collapseExample" style="width:28%;">
<div class="card card-body">
<div class="accordion" id="accordionExample">
<div class="card" style="width:99%;">
<div class="card-header" id="headingOne" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Dragon Roost Island - Wind Waker
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="dragonroost.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingTwo" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Gerudo Valley - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="gerudo.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingThree" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lost Woods - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="lostwoods.mp3">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true">
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</body>
</html>使用样式表可以更容易地管理代码。如图所示。
为了移动"；塞尔达播放列表"；在按钮的正下方，您只需要一个封装按钮和播放列表的包装器。
之后，将定位css从按钮迁移到包装器(默认情况下，任何元素的位置都是块，这意味着如果按钮在包装器中的播放列表上方，则默认情况下按钮和播放列表垂直对齐(。
设置为右：5%而不是左：95%，这允许包装项目默认情况下向右对齐。
将按钮设置为向右浮动，向左边距：100%以确保它位于右侧。
将折叠div设置为100%，以确保整个折叠的div不会收缩
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>My Webpage</title>
<style>
.collapsibleWrapper {
position:absolute; right: 5%; top:34%;
}
.collapsibleWrapper .btn-primary {
max-width: 80px;
float: right;
margin-left: 100%;
}
.collapse, .collapsing {
width: 100% !important;
}
</style>
</head>
<body>
<div class="collapsibleWrapper">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Zelda Playlist
</button>
<div class="collapse" id="collapseExample" style="width:28%;">
<div class="card card-body">
<div class="accordion" id="accordionExample">
<div class="card" style="width:99%;">
<div class="card-header" id="headingOne" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Dragon Roost Island - Wind Waker
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="dragonroost.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingTwo" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Gerudo Valley - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="gerudo.mp3">
</audio>
</div>
</div>
</div>
<div class="card" style="width:99%;">
<div class="card-header" id="headingThree" style="text-align:center">
<h2 class="mb-0">
<button class="btn btn-secondary text-center collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Lost Woods - Ocarina of Time
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body" style="text-align:center">
<audio controls>
<source src="lostwoods.mp3">
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
<audio src="death.wav" autostart="false" width="0" height="0" id="death" enablejavascript="true">
<script>
var death = document.getElementById("death");
death.volume = 0.2;
</script>
</audio>
</audio>
</body>
</html>