flex布局中padding-right失效问题

最新推荐文章于 2023-08-04 11:32:40 发布

qq_251025116

最新推荐文章于 2023-08-04 11:32:40 发布

阅读量7.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_24882601/article/details/103908565

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

相信大家在使用flex布局的时候都遇到一个问题，就是在子元素超出父元素的情况下，padding-left正常， padding-right失效问题，如下图：

那么要怎么解决这个问题呢？话不多说，直接贴代码：

CSS：

.container {
               display: flex;
               overflow: auto;
               border: 1px solid red;
               height: 100px;
               padding: 10px;
           }

           .container:after {
               content: '';
               display: block;
               width: 0px;
               height: 100%;
               border-right: 1px solid transparent;
           }

           .wrapper {
               display: flex;
               box-sizing: border-box;
               justify-content: space-between;
               width: 100%;
           }

           .wrapper div {
               border: 1px solid blue;
               flex: 0 0 20%;
               margin-right: 10px;
               height: 20px;
           }

HTML：

完整HTML代码：

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta http-equiv="X-UA-Compatible" content="ie=edge" />
       <title>Title</title>
       <style>
           * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               overflow: auto;
           }

           .container {
               display: flex;
               overflow: auto;
               border: 1px solid red;
               height: 100px;
               padding: 10px;
           }

           .container:after {
               content: '';
               display: block;
               width: 0px;
               height: 100%;
               border-right: 1px solid transparent;
           }

           .wrapper {
               display: flex;
               box-sizing: border-box;
               justify-content: space-between;
               width: 100%;
           }

           .wrapper div {
               border: 1px solid blue;
               flex: 0 0 20%;
               margin-right: 10px;
               height: 20px;
           }
       </style>
   </head>

</body>

</html>

只是右边会多出1px的像素，但是也没有问题吧。

qq_251025116

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
flex布局中padding-right失效问题

相信大家在使用flex布局的时候都遇到一个问题，就是在子元素超出父元素的情况下，padding-left正常， padding-right失效问题，如下图：那么要怎么解决这个问题呢？话不多说，直接贴代码：CSS：.container { display: flex; overflow: auto; ...
复制链接

扫一扫