个人中心无法水平
来源:13-5 PC端登录功能模块开发
带队友去杀猪
2017-03-11
render() {
let {getFieldDecorator} = this.props.form;
const userShow = this.state.hasLogined
?
<Menu.Item key="logout" className="register" >
<Button type="primary" htmlType="button">{this.state.userNickName}</Button>
<Link target="_blank">
<Button type="dashed" htmlType="button">个人中心</Button>
</Link>
<Button type="ghost" htmlType="button" onClick={this.logout.bind(this)}>退出</Button>
</Menu.Item>
:
<Menu.Item key="register" className="register">
<Icon type="appstore" />注册/登录
</Menu.Item>;
return (
<div id="pcheader">
<header>
<Row>
<Col span={2}></Col>
<Col span={4}>
<a href="/" className="logo">
<img src="../images/logo.png" alt="logo" title="ReactNews" />
<span>ReactNews</span>
</a>
</Col>
<Col span={16}>
<Menu mode="horizontal" onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]}>
<Menu.Item key="top"><Icon type="appstore" />头条</Menu.Item>
<Menu.Item key="society"><Icon type="appstore" />社会</Menu.Item>
<Menu.Item key="internal"><Icon type="appstore" />国内</Menu.Item>
<Menu.Item key="international"><Icon type="appstore" />国际</Menu.Item>
<Menu.Item key="entertainment"><Icon type="appstore" />娱乐</Menu.Item>
<Menu.Item key="sports"><Icon type="appstore" />体育</Menu.Item>
<Menu.Item key="science"><Icon type="appstore" />科技</Menu.Item>
<Menu.Item key="fashion"><Icon type="appstore" />时尚</Menu.Item>
{userShow}
</Menu>.register{
float: right !important;
}

写回答
3回答
-
Parry
2017-03-11
将 <Col span={16}> 缩小成 <Col span={8}> 测试一下看看。00 -
Parry
2017-03-11
麻烦贴下完整代码。
022017-04-05 -
时君
2017-03-17
后面老师的代码里面做了修正,pc.css
里面多了这么一句话。
.ant-menu-horizontal > .ant-menu-item > a,.ant-menu-horizontal > .ant-menu-submenu > a {
display: inline-block !important;
}212017-11-14
相似问题