Material-ui中网格项目的对齐方式

Posted 2023-02-22

【中文标题】Material-ui中网格项目的对齐方式

【英文标题】：Alignment of grid items in Material-ui

【发布时间】：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>

【参考方案1】：

为了使项目垂直居中，您应该使用属性alignItems 并为其指定值center。对于第二个问题，如果没有任何问题的重现，我将无法帮助您：

  <Grid container direction='column' spacing=1>
    <Grid container item style=width:"850px" >
        <Grid container item xs=3 spacing=1 alignItems="center">
            <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 alignItems="center">
            <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 alignItems="center">
            <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 alignItems="center">
            <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 spacing=1 xs=2 alignItems="center">
            <Grid item>HHHH</Grid>
            <Grid item>
                <Input 
                    fullWidth="true"
                    inputProps= maxLength: 4, size: 4, style:  textTransform: "uppercase"   
                />
            </Grid>
        </Grid>
        <Grid container spacing=1 xs=2 alignItems="center">
            <Grid item>IIII</Grid>
            <Grid item>
                <Input 
                    fullWidth="true"
                    inputProps=maxLength: 4, size: 4, style:  textTransform: "uppercase"   
                />
            </Grid>
        </Grid>
    </Grid>
</Grid>

【讨论】：

嘿！感谢您的回复，但我的问题可能问得不好^^ 对于第一点，我正在寻找一种方法让输入字段的左边框与“AAAAAAA”、“FFF/FFF”和“HHHH”相关联“对齐（您可以在图像上看到它们不是）我可以通过硬编码包含文本“AAAAAAA”、“FFF/FFF”和“HHHH”的每个网格的 80px 宽度来找到一种解决方法，以便每个输入字段开始在同一个位置，但这是一个肮脏的解决方案，我想知道是否存在更清洁的解决方案。

对于第二个问题，我编辑了问题的文本。我还更新了屏幕截图以使其更清晰