个人中心无法水平

Question

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;

}

Answer 1

Parry 2017-03-11 21:03:47

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

Answer 2

Parry 2017-03-11 19:59:12

麻烦贴下完整代码。

• 提问者 带队友去杀猪 #1

  问题已编辑，css其他和视频一样，就是右浮动的话，个人中心还有退出按钮都是垂直排列。

• EdwinW #2

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

Answer 3

时君 2017-03-17 15:15:36

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

里面多了这么一句话。

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

• qq_Mr石先森_0 #1

  加 了也不行。。