Question

我在它前面有一些文本和一个按钮（弹出）。目前，文本和按钮之间没有空格。我想在两个项目之间留出一些空间。如果我尝试将其中一个放在一个分区中以放置 marginRight 或 marginLeft，则第二个对象（按钮）将移动到下一行。我希望它们都在同一条线上，但中间有一个空格。我怎样才能做到这一点？

const useStyles = makeStyles((theme) => ({
  heading: {
    fontSize: "25px"
  },
  popup: {
    marginLeft: "20px"
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <div className={classes.heading}>
        Instructions
        {/* <div className={classes.popup}> */}
        <Popup />
        {/* </div> */}
      </div>
    </div>
  );
}

代码沙盒：https://codesandbox.io/s/bold-hooks-yhik1?file=/src/App.js:0-638

Answer 1

您是否尝试过使用 flexbox？

在您的样式中将标题类更新为 display: flex

  heading: {
   fontSize: "25px",
   display: "flex",
   alignItems: "center"
  },

这是你想要达到的目标吗？

从你的代码和盒子中分叉：

https://codesandbox.io/embed/boring-northcutt-e0wdg?fontsize=14&hidenavigation=1&theme=dark

材质 ui 按钮移动到新行

1 个答案: