个人中心无法水平

来源: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>
      &nbsp;&nbsp;
      <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;

}

http://szimg.mukewang.com/58c3cd6f0001798b13950222.jpg

写回答

3回答

Parry

2017-03-11

将 <Col span={16}> 缩小成 <Col span={8}> 测试一下看看。
0
0

Parry

2017-03-11

麻烦贴下完整代码。

0
2
EdwinW
老师, pc.css里加了这些样式 .ant-menu-horizontal > .ant-menu-item > a,.ant-menu-horizontal > .ant-menu-submenu > a { display: inline-block !important; } 个人中心的按钮还是不能水平显示, 我对比了你的代码还是不行. 最后把导航栏的宽度改成才勉强解决. 这是啥问题啊? 是不是我屏幕太窄了?
2017-04-05
共2条回复

时君

2017-03-17

后面老师的代码里面做了修正,pc.css

里面多了这么一句话。

.ant-menu-horizontal > .ant-menu-item > a,.ant-menu-horizontal > .ant-menu-submenu > a {
   display: inline-block !important;
}

2
1
qq_Mr石先森_0
加 了也不行。。
2017-11-14
共1条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程