javascript - 使用 Meteor 集合中的元素数量更改 css。

Question

所以我正在构建一个应用程序，允许用户存储方程式并将其放在主页上，用户可以在主页上显示一个标题为“方程式”的按钮。所以我的问题是我想根据按钮的数量以不同方式显示这些按钮。我想在主页上有一行，并让按钮自己设计成这样

如果只有一个按钮:

......................................|按钮|....... .....................................

如果有两个按钮:

......................|按钮|......................|按钮|......................

如果三个按钮:

................|按钮|................|按钮|................|按钮|..........

我在网上看过，但不确定从哪里开始添加此功能。所以我的问题是我可以从哪里开始添加这个功能？谢谢。

Answer 1

如果我没理解错的话；你的 HTML 代码中有这样的东西:

    <div class="row">
        <button>Equation</button>
        <button>Equation</button>
    </div>

然后在您的 CSS 代码中您可以添加它，它将使您行中的所有元素居中，根据需要更改按钮的宽度:

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

button {
    width: 200px;
}

解释:https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties