微信小程序flex-row布局中button的问题

最新推荐文章于 2024-11-11 11:57:47 发布

Louis_lan

最新推荐文章于 2024-11-11 11:57:47 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web 文章标签：微信小程序 flex布局

本文链接：https://blog.youkuaiyun.com/liu14lang/article/details/86607528

前端web 专栏收录该内容

14 篇文章

订阅专栏

在微信小程序的flex布局中，遇到button无法靠边对齐的问题。通过在button样式中添加特定属性，可以成功解决这一对齐问题，实现按钮的两侧对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信小程序开发中最常见的布局即为flex布局，在flex布局中我们知道两边对齐可以用 justify-content: space-between;css样式实现，但是在处理button方面上butoon始终不能靠边对齐。解决方法如下(在button样式中加个margin-right: 0;即可)：

.flex-row{
  display: flex;  
  flex-direction: row;  
  align-items: center;
}
.carbin-item{
  width: 90%;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: solid #eee 2rpx;
  font-size: 11pt;
}
.carbin-item button{
  font-size: 11pt;
  width:40%;
  margin-right: 0;
}