vue 循坏按钮样式为一行两个?

怎样修改样式一行两个按钮
12_20221130155546.png2_20221130155621.png
<div style="width: 90%; margin: 60px auto; display: flex; justify-content: space-between; flex-wrap: wrap">

            <van-button v-for="(item, index) in btnsArr" style="margin-bottom: 300px"
                        :disabld="item.stgBinCode === null" :style="{'background-color': btnColor(item.stgBinCode)}"
                        :key="index">{{item.binName}}</van-button>
        </div>
回复
阅读 553
2 个回答
<ul>
    <li v-for="(item, index) in todos" :key="index">
        <el-button>{{item.text}}</el-button>
    </li>
</ul>
ul{
    list-style: none;
    width: 100%;
    margin: auto;
    padding:0;
    display: flex;//关键
    flex-wrap: wrap;//关键
    li{
        text-align: center;
        width: 50%;
        height: 60px;
    }
}

图片.png
是这样吗

修改外部容器宽度,或者给双数按钮(:nth-child(even))增加一个 margin-right 按钮间的间距使用 gap 来实现。

也可以修改外部容器为 grid 后调整布局。

推荐问题
宣传栏