Question

我已经看到了几种将文本甚至图像对齐到右边的方法，但是当我尝试将一个简单的头像与一些文本对齐时，我无法让它工作。它实际上曾经工作，直到我切换到材料-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的简短代码段。我认为这就是你所需要的。

private void myFunction(){

    ArrayList<String> arrayListOne = new ArrayList<>();
    arrayListOne.add("LABEL NAME");

    for (int i=0; i< 10; i++){

        arrayListOne.add("name"+i);

    }

    ArrayList<String> arrayListTwo = new ArrayList<>();
    arrayListTwo.add("LABEL DESIGNATION");

    for (int i=0; i< 10; i++){

        arrayListOne.add("designation"+i);

    }

    arrayListOne.addAll(arrayListTwo);

    ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(context, android.R.layout.simple_spinner_item, arrayListOne);
    arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    mSpinner.setAdapter(arrayAdapter);

}

CSS：

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

checkout the demo here:

如何将头像与其他链接对齐？

1 个答案: