【发布时间】：2021-10-07 08:41:33
【问题描述】：
我正在开发一个原型，以使用 React.js 和 Material Ui 将 JavaFx 窗口迁移到 Web 应用程序。结果必须尽可能接近 JavaFx 应用程序的外观。
窗口的布局非常基本，它看起来像一个带有多个文本字段的表单，用于读取或输入数据。
我有 2 个主要问题，因为我在与预期布局匹配时遇到了一些困难。我正在使用 Material Ui 和一些网格组件。
- 首先，如何对齐 3 个左侧输入字段（与 AAAAAAA、FFF/FFF、HHHH 相关联，以便每个输入字段的左边框垂直对齐？
- 然后，我在使用网格时遗漏了一些东西。我不明白为什么，在第 3 行，第一个输入字段和 IIII 之间有一个空格。我正在寻找一种方法来删除这个空白，我认为网格只会占用标签和输入字段所需的空间，但显然添加了一些其他空白。我添加了蓝色、黄色和橙色背景颜色，以便更好地了解正在发生的事情。我原以为“黄色”块会在“橙色”块的末尾结束。
您可以在下面找到我的结果和相关代码的屏幕截图 感谢您的帮助！
<Grid container direction={'column'} spacing={1}>
<Grid container item style={{width:"850px"}} >
<Grid container item xs={3} spacing={1}>
<Grid item>AAAAAAA</Grid>
<Grid item xs={7}>
<Input
inputProps={{ maxLength: 7, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid justify='flex-end' container item xs={8} spacing={1} >
<Grid item>BBBB</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>CCCC</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>DDDD</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>EEEE/E</Grid>
<Grid item item xs={2}>
<Input
inputProps={{ maxLength: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
<Grid item>/</Grid>
<Grid item xs={1}>
<Input
inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
<Grid container item style={{width:"850px"}}>
<Grid container item xs={6} spacing={1}>
<Grid item>FFF/FFF</Grid>
<Grid item xs={9}>
<Input
fullWidth="true"
inputProps={{ maxLength: 21, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid container item xs={6} spacing={1}>
<Grid item>GGGG</Grid>
<Grid item xs={10}>
<Input
fullWidth="true"
inputProps={{maxLength: 21, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
<Grid container item style={{border:"1px solid red", width:"1000px"}}>
<Grid container style={{backgroundColor: "yellow"}}spacing={1} xs={2}>
<Grid item style={{backgroundColor: "blue"}}>HHHH</Grid>
<Grid item style={{backgroundColor: "orange"}}>
<Input
fullWidth="true"
inputProps={{ maxLength: 4, size: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
<Grid container spacing={1} xs={2}>
<Grid item>IIII</Grid>
<Grid item>
<Input
fullWidth="true"
inputProps={{maxLength: 4, size: 4, style: { textTransform: "uppercase" } }}
/>
</Grid>
</Grid>
</Grid>
</Grid>
【问题讨论】：
标签： javascript reactjs material-ui css-grid