css - 如何在不向父 div 添加额外空间的情况下添加边距

Question

我使用 react material ui 创建了一个侧边栏抽屉，并尝试在侧边栏抽屉样式上创建被点击的元素，就像这个例子中的一样 http://react-material-dashboard.devias.io/dashboard .

我使用这里的代码 https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/drawers/ResponsiveDrawer.js创建抽屉。

并为事件项添加这样的样式。

const styles = () => ({
  clickedItem: {
    borderLeft: "4px solid #0767DB",
    borderRadius: "4px",
    backgroundColor: "#F6F9FD",
    marginLeft: "10px"
  }
});

但是，由于我添加了 marginLeft，侧边栏现在可以在 x 轴上滚动，因为它在右侧增加了额外的空间。我希望它在不影响右侧的情况下添加左侧边距。我尝试使用 overflow: "hidden"。但是，y 滚动条也是隐藏的，不能滚动。

如何修复它，即使我添加了 marginLeft，元素大小(宽度)仍然相同？

Answer 1

我在链接的仪表板上玩了浏览器检查。

尝试将:width:auto; 添加到您传递给事件元素的样式中。这将阻止边距被随意添加到固定宽度并导致溢出。

作为奖励，它可能有助于添加 word-break: break-all; 以避免任何奇异的长单词也导致抽屉溢出。

希望这对您有所帮助!