在 Semantic UI React 中对齐菜单项和子菜单答案

【问题标题】：Aligning menu items and sub menus in Semantic UI React在 Semantic UI React 中对齐菜单项和子菜单
【发布时间】：2023-03-24 14:19:01
【问题描述】：

我试图弄清楚如何让子菜单与语义 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 样式似乎没有任何作用。

输出（边距突出显示）：

【问题讨论】：

标签： css reactjs vertical-alignment semantic-ui semantic-ui-react

【解决方案1】：

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

【讨论】：