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

这里我有一个当前标题渲染的图像。Header由一个Header菜单和3个链接组成。链接工作正常，但HeaderMenu导致链接下降到其下方。HeaderManu包含一个div，它包裹着一个按钮和弹出按钮，充当下拉菜单

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

Header.js

从“@material ui/core”导入{AppBar、按钮、链接、工具栏、排版}
从“./HeaderMenu.js”导入HeaderMenu
常数头=（道具）=>{
常量{classes}=props
返回(
公司名称
在这里
企业
支持
登录
)
}
导出默认标题

您应该将所有链接包装到一个

div

中，然后将其添加到您的

---

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

将其添加到工具栏CSS:

display:flex；对齐项目：居中

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