如何使用css来均匀地布局一些动态显示的按钮？
如何使用css来均匀地布局一些动态显示的按钮？
提问于 2019-06-04 08:13:36
我在Vue中使用v-if动态生成了许多按钮。我想在页面底部均匀地布局按钮(左边和右边的空白区是一样的)。
我使用的是mdui按钮样式，它看起来是固定的宽度和高度。因此，我必须在一行(例如，如果按钮少于三到四个或超过移动页面的宽度)或两行(如果有更多按钮)上布局。
我已经试过<div class="bottomBtn" style="display:flex; flex-wrap:wrap;">了它不工作...我对div盒子感到非常困惑。如何做到这一点？
我希望左边和右边的空间是均匀的。但结果如图所示，所有按钮都是左对齐的。
<div class="bottomBtn">
<button class="mdui-btn mdui-btn-raised">Save</button>
<button class="mdui-btn mdui-btn-raised" v-if="pullDisplay">PullBack</button>
<button class="mdui-btn mdui-btn-raised" v-if="cancelDisplay">Cancel</button>
<button class="mdui-btn mdui-btn-raised" v-if="reviseDisplay">Revise</button>
<button class="mdui-btn mdui-btn-raised" v-if="sendDisplay">SendBack</button>
<button class="mdui-btn mdui-btn-raised" v-if="approvalDisplay">Approval</button>
</div>回答 1
Stack Overflow用户
发布于 2019-06-04 08:33:47
要使用flexbox实现这一点，就像您正在尝试的那样，您需要将justify-content属性设置为space-between。
i.e
<div class="bottomBtn" style="display:flex; flex-wrap:wrap; justify-content: space-between;">我还建议将这些样式收集到一个可以添加到div中的类中。
space-around和space-evenly也可以达到类似的效果，所以你可能想尝试一下，看看哪一个能给你最满意的结果。
我强烈推荐this guide来解决如何让flexbox在未来做你想做的事情。
最后一条建议:如果你想让按钮之间总是有空隙(这样它们在完全接触之前就会包裹起来)，只需在按钮上增加一个左右边距，剩下的部分由flex来处理。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56435919
复制相关文章
相似问题