css - 在 Semantic UI React 中对齐菜单项和子菜单

Question

我试图弄清楚如何让子菜单与语义 UI 反应菜单组件中的菜单项正确对齐。

目前我的组件看起来像这样。

import React from "react";
import { Menu, Container, Dropdown } from "semantic-ui-react";

const menuStyle = {
  border: "none",
  borderRadius: 0,
  boxShadow: "none",
};

export const HeaderMenu = () => {
  return (
    <Menu pointing secondary borderless style={menuStyle} widths={5}>
      <Menu.Item>Home</Menu.Item>
      <Menu.Item link as="a" href="/about">
        About Me
      </Menu.Item>
      <Menu.Item link as="a" href="/contact">
        Contact
      </Menu.Item>
      <Menu.Item as="Menu">
        <Dropdown text="Projects" pointing className="link item">
          <Dropdown.Menu>
            <Dropdown.Item link as="a" href="/projects">
              All Projects
            </Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item>Computer Science</Dropdown.Item>
            <Dropdown.Item>Other projects</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Menu.Item>

      <Menu.Item as="a"> Blog </Menu.Item>
    </Menu>
  );
};

当我渲染组件时，它看起来子菜单与其余菜单项不一致。实际尺寸很好，但我想将它们全部垂直对齐到中间。但是添加verticalAlign: middle样式似乎没有做任何事情。

输出（边距突出显示）：

标签： cssreactjsvertical-alignmentsemantic-uisemantic-ui-react

Answer 1

我设法通过强制子菜单包含一个padding: "0"值来解决这个问题。我不确定这是否是最好的解决方案，因为它必须包含自定义 css。