アバターを他のリンクと整列させるには？

Question

テキストや画像を右揃えにするいくつかの方法を見てきましたが、単純なアバターとテキストを揃えようとすると、うまく動作しません。 これは実際に私がmaterial-ui-nextに切り替えるまで働いていましたが、今は正しく整列させることができません。 だから私が持っているのは ですが、私はText1を（それのように）、Text2とアバターを隣り合わせにして右に揃えたいと思います。すべて同じ行にある。 ベローは今まで私が持っていたレンダリング部分ですが、実際には何度も異なっていました。最後の試行では<li>を使用していましたが、この場合は必要ないと思っていますが、私は私のように感じる

.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; 
} 

：

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：これはアバターのためにレンダリングされ

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> 
    ); 
    } 
    } 

：

この

はトップコンテナのレンダリングですあまりにもやっていると私はかなり単純にする必要がありますが、私はそれが私が望む方法を見て得ることができます。助言がありますか？私がそれをすべて間違っているなら、私は簡単にこの全体をリファクタリングすることができます。ありがとうございました！

Answer 1

フレックスボックスを使用した短いスニペットです。私はこれがあなたが必要とするものだと思います。

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: