css 如何去除抽屉的边距

ldioqlga  于 2022-12-01  发布在  其他
关注(0)|答案(2)|浏览(117)

我使用了一个antd抽屉。抽屉的左边和右边的边距不能被删除,所以步骤组件被从左边和右边推了几个边距(红色圆圈)。
然后,蓝色滑块也有一个空白(绿色圆圈)。
我试着把margin:0pxpadding:0px,但似乎没有解决这些问题。
代码沙箱:https://codesandbox.io/s/basic-antd-4-19-5-forked-iq13nx?file=/index.js

ne5o7dgx

ne5o7dgx1#

如果要删除红色边距,需要将左右边距设置为0,并在垂直边保持24px:

.ant-drawer-body {
    flex-grow: 1;
    padding: 24px 0; // <-- This 0 do the work
    overflow: auto;
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
}

对于蓝色下划线(图像中的绿色信号),必须更改此样式:

.ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after {
    position: absolute;
    right: 0; // <-- 0 instead 20px
    bottom: 0;
    left: 0; // <-- 0 instead 20px
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    content: '';
}
wmvff8tz

wmvff8tz2#

你也可以使用使用了Drawer的道具“bodyStyle“来修改正文的样式:

<Drawer          
          bodyStyle={{ padding:'0px' }}
        >
//...
        </Drawer>

相关问题