Javascript 工具栏错误放置的导航项

我试图将导航项与徽标放在同一行中，很好地放在工具栏中，但它保持不同行的位置。我已经在代码沙盒中复制了错误

在这里，我声明了我的导航代码“Item”：

从“React”导入React；
从“样式化组件”导入样式化；
const NavigationItemList=styled.div`
保证金：0；
框大小：边框框；
显示器：flex；
身高：100%；
对齐项目：居中；
`;
const NavigationItemA=styled.div`
颜色：白色；
文字装饰：无；
身高：100%；
填充：16px 10px；
边框底部：4px实心透明；
框大小：边框框；
显示：块；
：悬停，
：活动{
背景色：#8f5C2；
边框底部：4px实心#40a4c8；
颜色：白色；
}
`;
常量导航项=（道具）=>{
返回(
{props.children}
);
};
导出默认导航项；

这里是我声明我的“项目”的地方

const NavigationItemsStyled=styled.div`
保证金：0；
填充：0；
列表样式：无；
显示器：flex；
对齐项目：居中；
身高：100%；
`;
const NavigationItems=（道具）=>{
返回(

汉堡生成器
结账

);
};

工具栏是我放置项目的位置：

import React from "react";
import styled from "styled-components";
import NavigationItems from "../NavigationItems/NavigationItems";

const ToolbarStyled = styled.div`
  height: 56px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background-color: #da291c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 90;
  color: white;
`;
const Toolbar = (props) => {
  return (
    <ToolbarStyled>
      <p>Logo</p>
      <nav>
        <NavigationItems />
      </nav>
    </ToolbarStyled>
  );
};

export default Toolbar;

从“React”导入React；
从“样式化组件”导入样式化；
从“./NavigationItems/NavigationItems”导入NavigationItems；
const ToolbarStyled=styled.div`
高度：56px；
宽度：100%；
位置：固定；
排名：0；
左：0；
保证金：0；
背景色：#da291c；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0 20px；
框大小：边框框；
z指数：90；
颜色：白色；
`;
常量工具栏=（道具）=>{
返回(
标志

);
};
导出默认工具栏；

---

任何帮助都将不胜感激：）

您需要设计ul列表的样式。 例如：

const NavigationItemsStyledUl = styled.ul`
   display: flex;
`;

然后使用

NavigationItemsStyledUl

代替

ul

---

照片-

NavigationItemList

需要是一个

li

标记。没有div或您的html无效。但对于你的问题：这似乎是一个css问题。使用

列表样式：无用于
ul
并使
li
内联或使用
flex
或
grid
thereHi@Dominik，感谢您提供有关ul和li建议的信息。我解决了这个问题。问题是我不知道styled components有styled.ul和styled.li，所以我尝试用styled.div包装普通的ul和li。太棒了，你解决了我的疑问
import React from "react";
import styled from "styled-components";
import NavigationItems from "../NavigationItems/NavigationItems";

const ToolbarStyled = styled.div`
  height: 56px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background-color: #da291c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 90;
  color: white;
`;
const Toolbar = (props) => {
  return (
    <ToolbarStyled>
      <p>Logo</p>
      <nav>
        <NavigationItems />
      </nav>
    </ToolbarStyled>
  );
};

export default Toolbar;

const NavigationItemsStyledUl = styled.ul`
   display: flex;
`;