需求
商品卡片价格与加购按钮如下分布：
实际效果
技术方案
display: flex;
flex-direction: row;
justify-content: space-between;解决思路
1.如果有margin:0 auto, 去掉即可
2.设置宽度width
解决方案
本身已经设置了margin，继而设置宽度width,问题解决，在设置width的时候有两种方式：
1.固定值
2.width:inherit (继承)
根据具体业务需求，可进行设置
本文介绍了如何利用CSS的Flex布局来实现商品卡片中价格和加购按钮的水平居中对齐。通过移除margin: 0 auto，设置flex-direction: row和justify-content: space-between，可以有效地解决布局问题。此外，还提供了两种width解决方案：固定值和继承父元素宽度。具体应用时，应根据业务需求选择合适的方法。
扫一扫
6926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
