解决antd顶部菜单栏自动收缩成三个点省略号

问题现象

image

布局示例代码

	<Header style={{display: "flex",justifyContent: "space-between",alignItems: "center"}}>
		<Space>
			<Image src="" preview={false}/>
			<Menu mode="horizontal" />
		</Space>
		<Avatar icon={<UserOutlined />} />
	</Header>

问题原因

容器水平宽度不够导致,且官方没有提及相关问题现象及对应的解决方案(布局控制)

解决方法

使用div容器包裹,添加flex:1属性

	<Header style={{display: "flex",justifyContent: "space-between",alignItems: "center"}}>
		<div style={{display:"flex",flex:1}}>
			<div>
				<Image src="" preview={false}/>
			</div>
			<div style={{flex:1}}>
				<Menu mode="horizontal" />
			</div>
		</div>
		<Avatar icon={<UserOutlined />} />
	</Header>

posted on 2024-03-10 13:29  luyifo  阅读(844)  评论(0)    收藏  举报

导航