uni-app Vue3环境下padding-right不生效

uni-app Vue3环境下padding-right不生效

示例代码：

    <view class="login__container"></view>  

<style lang="scss">  
    .login__container {  
        width: 100%;  
        height: 100vh;  
        display: flex;  
        flex-direction: column;  
        background-color: #F6F8FB;  
        padding-left: 40rpx;  
        padding-right: 40rpx;  
}  
</style>

操作步骤：

    <view class="login__container"></view>  

<style lang="scss">  
    .login__container {  
        width: 100%;  
        height: 100vh;  
        display: flex;  
        flex-direction: column;  
        background-color: #F6F8FB;  
        padding-left: 40rpx;  
        padding-right: 40rpx;  
}  
</style>

预期结果：

  • padding-right 生效

实际结果：

  • 并没有

bug描述：

不管padding写法还是分开padding-right写法。right就是不生效.


| 信息类别       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/H5        |
| PC开发环境     | Windows          |
| PC操作系统版本 | Windiws10 ltsc   |
| HBuilderX类型  | 正式             |
| HBuilderX版本  | 3.3.11           |
| 浏览器平台     | Chrome           |
| 浏览器版本     | 98.0.4758.102    |
| 项目创建方式   | HBuilderX        |

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220304/85d0cdeb9e91fead59547516eb94cc62.png)

更多关于uni-app Vue3环境下padding-right不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

跟vue3,vue2没有关系，是基础的css排版知识 补充 box-sizing: border-box; 或者移除width:100%
https://www.w3school.com.cn/cssref/pr_box-sizing.asp

更多关于uni-app Vue3环境下padding-right不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢指出

在uni-app Vue3环境下，padding-right不生效的问题通常与以下几个因素有关：

  1. 父容器宽度限制：检查父级元素是否设置了固定宽度或overflow:hidden，这可能导致padding-right被裁剪。建议检查父容器的样式设置。

  2. rpx单位转换：在H5环境下，rpx单位会根据屏幕宽度动态转换。可以尝试改用px单位测试是否是单位转换问题。

  3. 浏览器默认样式：某些浏览器可能对flex容器有默认样式影响。可以尝试添加：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
  1. 样式作用域：确保样式正确应用到目标元素，可以尝试添加!important临时测试：
padding-right: 40rpx !important;
回到顶部