如何将头像与右侧的其他链接对齐？答案

【问题标题】：How to align avatar with other links to the right?如何将头像与右侧的其他链接对齐？
【发布时间】：2017-12-14 02:46:52
【问题描述】：

我已经看到了几种将文本甚至图像向右对齐的方法，但是当我尝试将一个简单的头像与一些文本对齐时，我无法让它工作。在我切换到 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;
}

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

【问题讨论】：

您是否尝试过使用flexbox 进行布局？它使这类事情变得更容易，并得到广泛的支持。另外，我会尝试将所有导航元素（文本 1、文本 2、徽标）作为 lis 放在同一个 ul 中。

标签： html css reactjs material-ui avatar

【解决方案1】：

这是一个使用 flexbox 的简短 sn-p。我想这就是你需要的。

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:

【讨论】：