我在div容器中有一些按钮，希望在容器中水平分布。
按钮的数量根据用户权限是动态的，因此我不能使用硬编码的百分比或距离。
<div class="main-div" [align]="center">
<button mdbBtn class="sub-button" type="button" id="myButton1" accessKey=4 color="primary" size="lg" mdbWavesEffect align="middle">Add Customer1</button>
<button mdbBtn class="sub-button" type="button" id="myButton2" accessKey=3 color="primary" size="lg" mdbWavesEffect align="middle">Add Customer2</button>
<button mdbBtn class="sub-button" type="button" id="myButton3" accessKey=4 color="primary" size="lg" mdbWavesEffect align="middle">Add Customer1</button>
<button mdbBtn class="sub-button" type="button" id="myButton4" accessKey=2 color="primary" size="lg" mdbWavesEffect align="middle">Add Customer2</button>
</div>
在下面的代码中-每个按钮都有一个访问级别，在组件的init方法中（用角度编写），有一个功能根据用户权限和访问级别检查是否可以向该用户显示该按钮按下此按钮后，init方法会将x.style.display设置为“ none”或“ block”。
我希望只有显示的按钮才能在容器中水平分布。
有谁知道如何做到这一点？
谢谢，
奥斯纳特
最佳答案
您能否为我们提供有关您所面临问题的更多详细信息。提供一些代码或某种形式，我们可以找到一些解决方案。如何使用隐藏按钮。
这是您正在寻找的解决方案：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
margin: 20px;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<button id="myDIV">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>