[英]Vertically aligning the button with the TextField in React Material-UI
I am using the Material-UI library for React.我正在使用 React 的 Material-UI 库。 I am trying to make a simple form that looks like:
我正在尝试制作一个简单的表格,如下所示:
However, I can't figure out how to align the button with the TextField
.但是,我不知道如何将按钮与
TextField
对齐。 I tried changing the margin-top
but it increases the margin of the entire wrapper.我尝试更改
margin-top
但它增加了整个包装器的边距。 Below is the code sandbox for it.下面是它的代码沙箱。
Any tips on getting this fixed?关于解决这个问题的任何提示?
https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark
In your styles.css file you can add {position: relative; top: 10px}
在你的 style.css 文件中,你可以添加
{position: relative; top: 10px}
{position: relative; top: 10px}
to the small-button className then adjust the top value until you are happy with the position alternatively you might be able to wrap the row in a div and use {display:flex; flex-direction:row; justify-content:center;}
{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;}
to align them all. {display:flex; flex-direction:row; justify-content:center;}
将它们全部对齐。
Just replace this line只需更换这一行
<div className="input-text-wrapper">
with和
<div className="input-text-wrapper" style={{display:"flex", alignItems:"center"}} >
AND remove margin-bottom from your style.css并从 style.css 中删除 margin-bottom
.input-text-wrapper-small {
width: 30%;
/*margin-bottom: 1.2em;*/
display: inline-block;
}
Change the below styles in styles.css在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 jsx
Remove the small-button div from inside the input-text-wrapper div and Then Enclose the input-text-wrapper div and small-button div inside a newly created horizontal-form div从 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>
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.