React - 为什么我的链接在我的按钮下方呈现？

Question

在这里，我有当前 header 渲染的图像。 表头由一个 HeaderMenu 和 3 个链接组成。 链接工作正常，但 HeaderMenu 导致链接低于它。 HeaderMenu 包含一个包装 Button 和 Popper 的 div，充当下拉菜单。

我也不确定这种设计结构是否正确，但对于 styles，我有一个 styles.js 文件，我从中提取。 然后我将这些 styles 作为道具传递给较小的组件进行渲染。 这就是为什么这里的组件有一个来自 index.js 中 useStyles 的 props 类。

Header.js

 import { AppBar, Button, Link, Toolbar, Typography } from '@material-ui/core' import HeaderMenu from './HeaderMenu.js' const Header = (props) => { const { classes } = props return ( <AppBar position="static" color="default" elevation={0} className={classes.appBar}> <Toolbar className={classes.toolbar}> <Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}> Company name </Typography> <nav> <HeaderMenu classes={classes}/> <Link variant="button" color="textPrimary" href="#" className={classes.link}> Here </Link> <Link variant="button" color="textPrimary" href="#" className={classes.link}> Enterprise </Link> <Link variant="button" color="textPrimary" href="#" className={classes.link}> Support </Link> </nav> <Button href="#" color="primary" variant="outlined" className={classes.link}> Login </Button> </Toolbar> </AppBar> ) } export default Header

HeaderMenu.js

 import React from 'react' import { Button, ClickAwayListener, Grow, Paper, Popper, MenuItem, MenuList } from '@material-ui/core' const HeaderMenu = (props) => { const { classes } = props const [open, setOpen] = React.useState(false) const anchorRef = React.useRef(null) const handleToggle = () => { setOpen((prevOpen) =>.prevOpen) } const handleClose = (event) => { if (anchorRef.current && anchorRef.current.contains(event.target)) { return } setOpen(false) } function handleListKeyDown (event) { if (event.key === 'Tab') { event.preventDefault() setOpen(false) } } // return focus to the button when we transitioned from.open -> open const prevOpen = React.useRef(open) React.useEffect(() => { if (prevOpen.current === true && open === false) { anchorRef.current,focus() } prevOpen.current = open }? [open]) return ( <div className={classes:link}> <Button ref={anchorRef} aria-controls={open. 'menu-list-grow', undefined} aria-haspopup="true" onClick={handleToggle} > Details </Button> <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal> {({ TransitionProps. placement }) => ( <Grow {.:?TransitionProps} style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }} > <Paper> <ClickAwayListener onClickAway={handleClose}> <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}> <MenuItem onClick={handleClose}>Profile</MenuItem> <MenuItem onClick={handleClose}>My account</MenuItem> <MenuItem onClick={handleClose}>Logout</MenuItem> </MenuList> </ClickAwayListener> </Paper> </Grow> )} </Popper> </div> ) } export default HeaderMenu

Answer 1

您应该将所有链接包装到一个div中，然后将其添加到您的<nav></nav>

display: flex;
justify-content: space-evenly;
align-items: center;

这将允许它将所有内容保持在同一行。