我试图将<LeftInputElement>
与<Input>
的baseline
或center
对齐。问题是我使用的是fontSize="2xl"
,并且元素最终未对齐。代码如下:
<HStack>
<Text fontSize={"2xl"}>{recordName ? recordName : "Record"}:</Text>
<InputGroup
width="25%"
padding={5}
fontSize={"2xl"}
>
<InputLeftElement
children={<Text fontSize={"2xl"}>{prefix}</Text>}
/>
<Input
variant="field"
fontSize={"2xl"}
borderRadius={20}
placeholder="enter value"
/>
</InputGroup>
<Button fontSize={"2xl"}>
<BsSearch />
Find Record
</Button>
</HStack>
字符串
无论我做什么(display ='flex',content ='center',items ='center',self ='center')--当然不是一次全部对齐,在适用的情况下,我最终会让InputLeftElement与容器顶部对齐,其他所有内容都正确对齐。
1条答案
按热度按时间yqlxgs2m1#
InputLeftElement
绝对位于InputGroup
组件的左上方,因此它不会考虑InputGroup
组件的填充更改。调整InputLeftElement
边距以考虑添加到InputGroup
的填充。字符串
Chakra playground showing solution