关于#css#的问题：想要按钮横向排列但是不改变标签的数列排向

Question

.rside{
width:1200px;
height:600px;
top:42px;
left:200px;
bottom:0;
position:absolute;
background:linear-gradient(60deg,gray,white);
}
 .center{
 width:1000px;
height:120px;
background:linear-gradient(50deg,gray,white);
top:50px;
left:80px;
position:relative;
display: flex;
}   
.center img{
width:100px;
height:100px;
border-radius:50%;
}
.center input{
 top:5px;
display: block;
}
.box{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box2{
margin:0 auto;
display:flex;
flex-direction: column;
}
.btn-group button{
width:100px;
height:75px;
}

<div class="rside">
<label>个人中心</label>
<div class="center" >
<img id="avatar" src="images/01.jpg"/>
<div > 
<input type="text" id="name"/>
<a><label>收货地址</label></a>
<a><label>优惠卷</label></a>
</div>
<div class="box2">
<label>信息</label>
<div class="btn-group">
<div class="box">
<button type="submit">
<i class="iconfont icon-daifukuan"></i>
</button>
<label>代付款</label>
</div>
<div class="box">
<button type="submit">
<i class="iconfont icon-daifahuo"></i>
</button>
<label>代发货</label>
</div>
<div class="box">
<button type="submit">
<i class="iconfont icon-daishouhuo"></i>
</button>
<label>代收货</label>
</div>
<div class="box">
<button type="submit">
<i class="iconfont icon-daipingjia"></i>
</button>
<label>代评价</label>
</div>
</div>
</div>
</div>
<div class="message"></div>
<div class="collect"></div>
</div>

想要按钮横向排列但是不改变标签的数列排向，因该怎么做啊？

Answer 1

参考GPT和自己的思路：

要实现按钮横向排列，可以将.btn-group下的.box样式改为display: inline-flex，这样里面的按钮就会变成水平排列。修改后的代码如下：

.box{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

注意，这里flex-direction的值仍然为column，这样标签的排列方向不会改变，而justify-content和align-items属性则可以让按钮在容器内水平、垂直居中。