纯迩:最纯净的距离 2023-03-20 14:27 采纳率: 54.5%
浏览 43
已结题

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

.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>

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

  • 写回答

3条回答 默认 最新

  • 追cium 2023-03-20 14:29
    关注

    参考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属性则可以让按钮在容器内水平、垂直居中。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月28日
  • 已采纳回答 3月20日
  • 创建了问题 3月20日

悬赏问题

  • ¥50 易语言把MYSQL数据库中的数据添加至组合框
  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况