reactjs - 如何在 Ant Design 中右对齐菜单项?
问题描述
有一个开放的Git 问题,请求用于对齐菜单项的道具。同时,将一些导航栏项目(例如登录、注销)移动到右侧的正确方法是什么?
这是菜单的示例代码,其中所有菜单项都在左侧。
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class App extends React.Component {
state = {
current: 'mail',
}
handleClick = (e) => {
console.log('click ', e);
this.setState({
current: e.key,
});
}
render() {
return (
<Menu
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
<Menu.Item key="mail">
<Icon type="mail" />Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<Icon type="appstore" />Navigation Two
</Menu.Item>
<SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
</Menu.Item>
</Menu>
);
}
}
ReactDOM.render(<App />, mountNode);
解决方案
float: right
尝试通过 JSX 样式或 CSS 类在右侧提供所需的菜单项。
使用 JSX 内联样式将导航三项拉到右侧的示例style={{float: 'right'}}
:
<SubMenu style={{float: 'right'}} title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
更新:(对于火狐):
如果您有左右菜单元素,则需要添加到右侧和左侧。
style={{float: 'right'}}
MenuItem
style={{float: 'left'}}
忽略后者会导致一些浏览器(Firefox)在底层<li>
标签之间出现中断。
推荐阅读
- python - 如何根据我按下的按钮使直流电机旋转不同的方向
- swift - 如何在 SwiftUI 中移动到下一个 TextField?
- javascript - Parceljs 没有正确捆绑产品?
- java - 使用 if 语句查找 3 个变量中的最小值
- angular - Fullcalendar - 角度营业时间未显示
- javascript - I don't understand why my for loop return "undefined"
- python - 如何从子集中选择数据
- oop - 如何动态生成用于特征的值?
- python - Selenium 无法在 Instagram 上获取所有元素
- compiler-errors - 为什么临时变量会抑制“类型归属是实验性的”错误?