在React中定义样式时无法更改按钮位置

Question

我需要我的按钮（在注销组件中定义）靠近Nav项目。

当我调用它时，它将放在屏幕中间，而不考虑样式定义的顶部和左侧。

这是注销组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.props.onLogout();
  };

  render() {
    const LogoutButtonStyle = {
     color: 'black',
     background: '#b7e1f7',
     height: 50px,
     width: 100px,
     left: 10,
     top: 10,
     display:'inline-block'
}

    return <button type="button" onClick={this.handleClick} style = {LogoutButtonStyle}>Back to Microsoft Give</button>;
 }
} 

此外，如果我删除“顶部”和“左侧”，则按钮的位置仍将相同。

这是WholeScreen组件，我在其中添加了注销组件：

  render(){
    .......

    return(
      <div className="WholeScreen">
        <div>
           <Nav bsStyle="pills" activeKey={this.state.year} onSelect={this.handleSelect} >
          {buttons}
        <LogoutButtonComponent onLogout={this.onLogoutClick}/>
        </Nav>
        </div>
        <div>          
      <YearlySummary year={this.state.year} yearData={yearData}/>
        </div>
      </div> 
     );
    }
  }

我将注销按钮放在与导航相同的位置，但是它将注销按钮放在中间而不是旁边。