如何删除 antd 抽屉中的边距

Question

我用的是antd抽屉。无法移除抽屉的左右边距，因此将 steps 组件从左右（红色圆圈）推了几个边距。

然后，antd steps blue slider也是有margin的（绿圈）。

我尝试添加 margin:0px 和 padding:0px，但似乎无法解决这些问题。

代码沙箱：https://codesandbox.io/s/basic-antd-4-19-5-forked-iq13nx?file=/index.js

Answer 1

如果你想去掉红色边距，你需要将padding left and right设置为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: '';
}

如何删除 antd 抽屉中的边距

How to remove the margin in a antd drawer

css

antd