时间戳

首页 > 解决方案 > 动态图像数量时在html中水平分布

javascript - 动态图像数量时在html中水平分布

问题描述

我在容器中有按钮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 方法中（用 Angular 编写），有一个函数根据用户权限和访问级别检查按钮是否可以显示给该用户对于此按钮，init 方法将 x.style.display 相应地设置为“none”或“block”。

我希望只有显示的按钮会在容器中水平分布。
有谁知道如何做到这一点？

谢谢，奥斯纳特

标签： javascripthtmlcssangular

解决方案

您能否向我们提供有关您所面临问题的更多详细信息。为我们提供一些代码或某种形式，我们可以找到一些解决方案。如何隐藏使用的按钮。

这是您正在寻找的解决方案吗：

<!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>

推荐阅读