html - 如何让头像与其他链接右对齐？

Question

我见过几种将文本甚至图像右对齐的方法，但是当我尝试将简单的头像与某些文本对齐时，我无法让它工作。它实际上曾经工作，直到我切换到 material-ui-next，现在我无法让它们正确对齐。所以我有的是 但我想让 Text1 位于左侧(就像现在这样)，Text2 和 Avatar 彼此相邻，并在右侧对齐。都在同一行。Bellow 是我到目前为止的渲染部分，实际上有很多次不同，我最后一次尝试使用 <li> ，虽然我认为在这种情况下我不需要它，但我愿意接受建议。

这是顶部容器的渲染图:

  render() {
      return (

        <div className="main-container">
            <div className="links-container">
                <div className="logo-container">Text1</div>
                <div className="right-links-container">
                    <ul className="right-list-container">
                        <li><a href="">Text2</a>
                        </li>
                        <li><AccountInfo />
                        </li>
                    </ul>


                </div >
            </div>
        </div>
      );
    }
  }

这是头像的渲染:

render() {
        return (

            <div className="profile-container">
                <Avatar
                    src="https://www.shareicon.net/data/2016/08/05/806962_user_512x512.png"
                    size={30}
                    onClick={this.handleAvatarClick}
                        />

                <Popover
                    open={this.state.showMenu}
                    anchorEl={this.state.anchorEl}
                    anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
                    targetOrigin={{horizontal: 'left', vertical: 'top'}}
                    onRequestClose={this.handleCloseAccountInfoMenu}
                >

                <MenuList role="menu">
                    <MenuItem >My account</MenuItem>
                    <MenuItem >Logout</MenuItem>
                  </MenuList>
                </Popover>
            </div>
        );
      }

和CSS:

.main-container {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%
}
.links-container {
    margin: 15px;
    text-align: right;
}
.logo-container {
    float: left;
}

.right-list-container a {
    text-decoration:none;
}
.right-list-container li:nth-child(1) {
    text-decoration:none;
    height:30px;
    display:block;
    background-position:right;
    padding-right: 15px;
}
ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.accountinfo-menu {
    width: 200px;
}
.profile-container {
    clear: both;
    vertical-align: middle;
    display: inline;
}

我觉得我做的太多了，我应该相当简单，但我可以让它看起来像我想要的那样。有什么建议么？如果我做错了，我可以很容易地重构整个事情。谢谢!

Answer 1

这是一个使用 flexbox 的简短片段。我认为这就是您所需要的。

render() {
      return (

        <div className="main-container">
            <div className="links-container flexbox">

                <div className="logo-container">Text1</div>

                <div className="right-links-container">
                    <ul className="right-list-container flexbox">
                        <li><Avatar /></li>
                        <li><a href="">Text2</a></li> 
                    </ul>
                </div>

            </div>
        </div>
      );
    }
  }

CSS:

    .flexbox{
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
    }



 .links-container{
    align-items:center;
    width:100%;
    }

    .logo-container{
    width:auto;
    }

    .right-list-container{
    margin-left:auto;
    width:auto;
    align-items:center;
    }

    .right-list-container li{
    margin-right:10px;
    }

checkout the demo here: