时间戳

首页 > 解决方案 > 为什么这段代码没有在不同的行上而不是并排显示按钮？

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

问题描述

以下代码打印 Logo，然后在下一行并排打印所有按钮。在第一个<div>标签中，我尝试完全放置block、inline-block和删除 display 属性。还尝试删除Boxmui 标签。没有任何效果。我对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>
  );
};

标签： cssreactjsmaterial-uinext.js

解决方案

您可以尝试像这样放置flex带有div方向的列吗：


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

推荐阅读