带有图像的语义用户界面反应菜单不对齐

Question

我刚开始使用语义UI反应来构建个人站点，当我将徽标作为图像添加到菜单时，它会甩掉右侧图标的对齐方式。我一直在尝试不同的语义UI菜单属性，但都没有用，而且我对CSS不太满意，因此不胜感激。我尝试对菜单项使用fit =属性，但这无济于事。如果我尝试将菜单项包装在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>

不要问我为什么...