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

Question

我试图将导航项与徽标放在同一行，在工具栏内，但它保持定位为不同的行。 我在这里复制了代码沙箱中的错误。

这是我声明导航“项目”代码的地方：

import React from "react";
import styled from "styled-components";

const NavigationItemList = styled.div`
  margin: 0;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  align-items: center;
`;

const NavigationItemA = styled.div`
  color: white;
  text-decoration: none;
  height: 100%;
  padding: 16px 10px;
  border-bottom: 4px solid transparent;
  box-sizing: border-box;
  display: block;

  :hover,
  :active {
    background-color: #8f5C2;
    border-bottom: 4px solid #40a4c8;
    color: white;
  }
`;

const NavigationItem = (props) => {
  return (
    <NavigationItemList active={props.active}>
      <NavigationItemA href={props.link}>{props.children}</NavigationItemA>
    </NavigationItemList>
  );
};

export default NavigationItem;

这是我声明我的“物品”的地方

const NavigationItemsStyled = styled.div`
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  height: 100%;
`;

const NavigationItems = (props) => {
  return (
    <NavigationItemsStyled>
      <ul>
        <NavigationItem>Burger Builder</NavigationItem>
        <NavigationItem>Checkout</NavigationItem>
      </ul>
    </NavigationItemsStyled>
  );
};

工具栏是我放置项目的地方：

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;

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

Answer 1

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

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

然后使用NavigationItemsStyledUl代替ul

照片 - https://prnt.sc/v7eupk