我在我的React应用程序中使用了flexbox,React Material,我想将搜索栏和清除按钮对齐在同一行上,并在彼此之间留出空间。
请看这个链接
CLICK HERE
<div className={classes.searchBarSection}>
<Paper component="form" className={classes.searchBar}>
<InputBase
className={classes.input}
placeholder="Search..."
inputProps={{ "aria-label": "search..." }}
/>
<IconButton
type="button"
className={classes.iconButton}
aria-label="search"
>
<SearchIcon />
</IconButton>
</Paper>
<Button variant="contained" size="small" color="primary">
Clear
</Button>
</div>
3条答案
按热度按时间xsuvu9jc1#
试试这个:
调整宽度,以获得所需的间距
这将看起来像:
nkoocmlb2#
添加这些样式后,宽度会给予searchBatSection留出喘息的空间,给孩子们留出空间。尝试使用justifyContent选项来找到适合的选项。
l7wslrjt3#
使用网格
https://codesandbox.io/s/material-demo-6w93i