.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>
想要按钮横向排列但是不改变标签的数列排向，因该怎么做啊？
参考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属性则可以让按钮在容器内水平、垂直居中。
.btn-group {display:flex;}