將按鈕與 React Material-UI 中的 TextField 垂直對齊

Question

我正在使用 React 的 Material-UI 庫。 我正在嘗試制作一個簡單的表格，如下所示：

但是，我不知道如何將按鈕與TextField對齊。 我嘗試更改margin-top但它增加了整個包裝器的邊距。 下面是它的代碼沙箱。

關於解決這個問題的任何提示？

https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark

Answer 1

在你的 style.css 文件中，你可以添加{position: relative; top: 10px} {position: relative; top: 10px}到小按鈕 className 然后調整頂部值，直到您對位置滿意為止，或者您可以將行包裝在 div 中並使用{display:flex; flex-direction:row; justify-content:center;} {display:flex; flex-direction:row; justify-content:center;} {display:flex; flex-direction:row; justify-content:center;}將它們全部對齊。

Answer 2

只需更換這一行

<div className="input-text-wrapper">

和

<div className="input-text-wrapper" style={{display:"flex", alignItems:"center"}} >

並從 style.css 中刪除 margin-bottom

.input-text-wrapper-small {
  width: 30%;
  /*margin-bottom: 1.2em;*/
  display: inline-block;
}

Answer 3

在styles.css中更改以下樣式

.horizontal-form { /* This is newly added style */
  display: flex;
  align-items: center;
}

.input-text-wrapper {
  /* margin-bottom: 1.2em; */ /* comment these styles */ 
}

.input-text-wrapper-small {
  width: 33%;
  /* margin-bottom: 1.2em; */
  display: inline-block;
}

.small-button {
  width: 10%;
  /* display: inline-flex;
  align-items: center; */
}

jsx

從 input-text-wrapper div 中刪除小按鈕 div 然后將 input-text-wrapper div 和小按鈕 div 包含在新創建的水平表單 div 中

...
</Typography>
<div className="horizontal-form">
   <div className="input-text-wrapper">
      <div className="input-text-wrapper-small">
         ...
      </div>
      <div className="input-text-wrapper-small">
         ...
      </div>
      <div className="input-text-wrapper-small">
         ...
      </div>
   </div>
   <div className="small-button">
      <Button variant="contained" color="primary">
      Add
      </Button>
   </div>
</div>
</CardContent>
....