材质UI使2个元素的高度相同

Question

我有以下代码：

<div className="center">
  <TextField
    variant="outlined"
    className="manualUserFollowTxt"
    required
    id="manualUserFollowTxt"
    label="Username"
    name="username"
    autoComplete="username"
    autoFocus
  />
  <Button variant="contained" color="primary" className="manualUserFollowButton"
    onClick={(e) => this.followButtonClick(e, document.getElementById("manualUserFollowTxt").value)}
  > 
    Follow
  </Button>
</div>

基本上会导致： what I have

我想要的是让TextField和Button具有相同的高度，并且它们之间有一点间距，并且位于一行上，最好位于中间。像这样：

what I want

我该如何实现？

Answer 1

为了使TextField和Button具有相同的高度并对齐，可以在父div上使用CSS Flexbox。
将显示设置为flex，将flex-direction设置为row。
为了在TextField和Button之间应用间距，您可以在TextField上应用margin-right（在这里我使用material-ui styling）：

==> powershell -noprofile -c "try{$x=@(gps -EA Stop|? {-not $_.Responding});exit $x.Count} catch {exit 5000}"

==> echo errorlevel=%errorlevel%
errorlevel=4