semantic-ui-react 带有图像的菜单不对齐

Question

我刚开始使用 semantic-ui-react 来创建个人网站，当我将徽标作为图像添加到菜单时，它会打乱右边的图标。我一直在修改不同的语义-ui 菜单属性，但无济于事，而且我对 css 也不是很好，因此我们将不胜感激。我尝试对菜单项使用 fitted= 属性，但没有帮助。如果我尝试将菜单项包装在 div 中并填充它们，整个菜单都会被丢弃。

代码：

import React, { Component } from 'react'
import { Link, NavLink, withRouter } from 'react-router-dom'
import { Button, Icon, Image, Menu } from 'semantic-ui-react'
//TODO: make paths absolute
import logo from '../../static/images/bridge-logo-trans.png'

const menuItems = [
  {name: "About", link: "/about"},
  {name: "Resume", link: "/resume"},
  {name: "Blog", link: "/blog"},
];

const contactItems = [
  {color: "black", icon: "github", link: "link1"},
  {color: "linkedin", icon: "linkedin", link: "link2"},
  {color: "red", icon: "mail", link: "link3"}
];


class TopMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      activeItem: "",
    }
    this.handleItemClick = this.handleItemClick.bind(this);
    this.handleLogoClick = this.handleLogoClick.bind(this);
  }

  handleItemClick(e, menuItem) {
    this.setState({ activeItem: menuItem.name });
  }

  handleLogoClick(e) {
    this.setState({ activeItem: menuItems[0].name });
  }

  render() {

    return (
      <Menu stackable>
        <Menu.Item>
          <Image as={NavLink} to="/"
                 src={logo} size='small' onClick={this.handleLogoClick}/>
        </Menu.Item>
          {menuItems.map((item) => (
            <Menu.Item
              as={NavLink}
              to={item.link}
              name={item.name}
              active={this.state.activeItem === item.name}
              onClick={this.handleItemClick}
            >
              {item.name}
            </Menu.Item>
          ))}
          <Menu.Menu position="right">
            {contactItems.map((item) => (
              <Menu.Item
                as="a"
                href={item.link}
                target="_blank"
              >
                <Button circular color={item.color} icon={item.icon} />
              </Menu.Item>
            ))}
          </Menu.Menu>
        </Menu>
    )
  }
}

export default withRouter(TopMenu);

Answer 1

通过向右侧菜单添加 'top' 属性解决了该问题，如下所示：

<Menu.Menu position="right">
            {contactItems.map((item) => (
              <Menu.Item
                style={{top: '0.8em'}}
                as="a"
                href={item.link}
                target="_blank"
              >
                <Button circular color={item.color} icon={item.icon} />
              </Menu.Item>
            ))}
          </Menu.Menu>

不要问我为什么...

semantic-ui-react 带有图像的菜单不对齐

semantic-ui-react menu with image throws off alignment

reactjs

semantic-ui

semantic-ui-react