老师,anti-design 又更新了吗，.register{float:right} 整体浮动到右边了，不是分开浮动的

Question

.register{float:right}  整体浮动到右边了，不是分开浮动的  ，依然是垂直排列，怎么解决

Answer 1

提问者 huang111 2017-09-14 22:01:54

老师，我截了图，这是加了浮动，不加浮动就整体向左边靠着

Answer 2

提问者 huang111 2017-09-14 21:42:56

<li class="ant-menu-item register" role="menuitem" aria-selected="false">
<button type="button" class="ant-btn ant-btn-primary">
<span>123</span>
</button>
<!-- react-text: 51 -->&nbsp;&nbsp;<!-- /react-text -->
<a target="_blank" href="/usercenter"><button type="button" class="ant-btn-dashed">
<span>个人中心</span></button></a>
<!-- react-text: 55 -->&nbsp;&nbsp;
<!-- /react-text --><button type="button" class="ant-btn ant-btn-ghost">
<span>退 出</span></button>
</li>

Answer 3

提问者 huang111 2017-09-14 21:11:32

<Menu.Item key='logout' className="register"  mode="horizontal">
    <Button type='primary' htmlType="button">{this.state.userNickName}</Button>
    &nbsp;&nbsp;
   <Link target="_blank" to={`/usercenter`}>
     <Button type="dashed" htmlType="button" >个人中心</Button>
   </Link>
    &nbsp;&nbsp;
  <Button type="ghost" htmlType="button"  onClick={this.logout.bind(this)}>退出</Button>
</Menu.Item>

.logo{
    display: flex;
    align-items: center;
}
.logo img{
    width: 48px;
    height: 48px;
}
.logo span{
    font-size: 24px;
    padding-left: 5px;
}
.footer{
    text-align: center;
}
.register{
    float: right!important;
}

• Parry #1

  right!important;
  right 和 !important; 之间的空格呢？还是贴代码的原因？？

• 提问者 huang111 回复 Parry #2

  回复 ParryKK老师，我加不加空格都是整体浮动到右侧，但是登录进去之前能找到.register的css,但是登录进去就找不到了，但是位置却整体向右移动了

• 提问者 huang111 回复 Parry #3

  老师我新了贴了浏览器解析后的那块代码，登录进去有register，但是register在 li的class中，这个li整体浮动到了右侧，但是li面的三个button还是垂直排列的

点开查看后面5条评论

Answer 4

Parry 2017-09-14 21:03:46

样式应该不会影响到，你 chrome 直接调试下 css 看看什么影响到了。

• 提问者 huang111 #1

  老师，帮我看看啊，我贴了代码

• 提问者 huang111 #2

  老师，我调试了，就没找到浮动，整体变成了绝对定位，版本"antd": "^2.13.1"

• 提问者 huang111 #3

  三项整体css:  .ant-menu-item > a:before {
      position: absolute;
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: '';
  }