为什么这段代码没有在不同的行上而不是并排显示按钮？答案

【问题标题】：Why does this code does not show buttons on different lines instead of side-by-side?为什么这段代码没有在不同的行上而不是并排显示按钮？
【发布时间】：2021-02-07 15:38:22
【问题描述】：

以下代码打印 Logo，然后在下一行并排打印所有按钮。在第一个<div> 标记中，我尝试放置block、inline-block，并完全删除显示属性。还尝试删除 Box mui 标签。没有任何效果。我对css没有经验，可能会犯一个愚蠢的错误。它是一个 nextjs 项目。

import {makeStyles} from '@material-ui/core/styles';
import DashboardIcon from '@material-ui/icons/DashboardOutlined';
import ListingsIcon from '@material-ui/icons/Reorder';
import ScheduleIcon from '@material-ui/icons/EventNote';
import ProfileIcon from '@material-ui/icons/AccountCircleOutlined';
import SalesIcon from '@material-ui/icons/TrendingUp';
import BookingsIcon from '../../public/images/bookingsIcon.svg';
import Logo from '../mainLogo';
import Box from '@material-ui/core/Box';


const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

export default function SideNav() {
  const classes = useStyles();
  return (
    <Box>
      <Logo />
      <div display="block">
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<DashboardIcon />}
        >
          Dashboard
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<ListingsIcon />}
        >
          Listings
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<ScheduleIcon />}
        >
          Schedule
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<BookingsIcon />}
        >
          Bookings
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<SalesIcon />}
        >
          Sales & Analytics
        </Button>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<ProfileIcon />}
        >
          Profile
        </Button>
      </div>
    </Box>
  );
};

【问题讨论】：

标签： css reactjs material-ui next.js

【解决方案1】：

正如@nishkaush 所说，在这种情况下你应该使用 flex，但由于你也在使用 Material-UI，你可以使用 Box 组件，它为你提供了一些 css 道具来快速原型化容器。

<Box display="flex" flexDirection="column" gridRowGap={10}>
  <Button {...} />
  <Button {...} />
  ...
</Box>

现场演示

【讨论】：

【解决方案2】：

试试<div style={{display:"flex"}}>

【讨论】：

【解决方案3】：

您可以尝试将flex 放在div 上，列方向如下：


      <div style={{display:'flex', flexDirection:'column'}}>
        <Button
          variant="contained"
          color="primary"
          className={classes.root}
          startIcon={<DashboardIcon />}
        >
          Dashboard
        </Button>
        ...
        ...
        ...
      </div>

【讨论】：

【解决方案4】：

只需在按钮本身上添加显示块，

按钮默认是内联块元素，而div默认是块级元素，所以你需要将显示块添加到按钮标签本身而不是div。

button {
  display: block;
}

<button>button 1</button>
<button>button 2</button>

【讨论】：