如何使图标适合语义 UI React 垂直菜单中的 Menu.Item？答案

【问题标题】：How to make Icon fit in Menu.Item in Semantic UI React Vertical Menu?如何使图标适合语义 UI React 垂直菜单中的 Menu.Item？
【发布时间】：2020-02-06 01:21:03
【问题描述】：

我正在 Semantic UI React 中构建一个垂直菜单栏。我的菜单中有许多 Menu.Item 组件。第一个 Menu.Item 包含一个没有菜单文本的图标组件。我遇到的问题是图标溢出到它下面的 Menu.Item 中。我想不通这是为什么？我试过调整边距、填充、行高，但似乎没有任何效果。有任何想法吗？将不胜感激。谢谢。

这是我的第一对 Menu.Items 的代码。向 Menu.Item 添加文本会正确增加大小，但我不希望任何带有图标的菜单文本。

<Menu.Item link><Icon name='x' size='large'/></Menu.Item>
            <Menu.Item as={Link} to='/' onClick={this.handleSidebarHide}>
              Home
            </Menu.Item>
            <Menu.Item as={Link} to='/about' onClick={this.handleSidebarHide}>About Us</Menu.Item>

【问题讨论】：

标签： reactjs semantic-ui semantic-ui-react

【解决方案1】：

试试这个对你有帮助

<Menu.Item> link style={{  display: "inline-block" }} ><Icon name='x' size='large'/></Menu.Item>

【讨论】：

加上 width: 100% 解决了我的问题。谢谢！