这是因为
我正试图使用jinja2从列表中创建一个可折叠按钮的动态列表，并使用此处的CSS按钮指南https://www.w3schools.com/howto/howto_js_collapsible.asp
现在，当我将宽度从100%更改为35%时，它不会将每个按钮放在另一个按钮下面，而是出于某种原因将它们并排放置，如下图所示。另外，我该如何使用CSS来集中处理这个问题？
https://i.stack.imgur.com/KdhCj.jpg
当我试图将其居中时，代码将只呈现其中一个可折叠按钮，而不是列表中的数字？
这是代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 35%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
​
​
.active,
.collapsible:hover {
background-color: #555;
}
​
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
​
.active:after {
content: "\2212";
}
​
​
​
.content {
padding: 0 18px;
width: 35%;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
​
​
</style>
</head>
<body>
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
{% for item in test_list %}
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p> {{ item }}</p>
</div>
{% endfor %}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
​
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>button的默认显示为display: inline-block。
这就是为什么2个按钮挨着出现的原因。
例如，只需将显示更改为display: block;，它就可以工作了。