垂直弯曲盒内的堆栈div
垂直弯曲盒内的堆栈div
提问于 2020-08-09 16:44:35
我的结构如下：
<ul className={classes.root}>
<li className={classes.statsItem}>
<div className={`${classes.span} ${classes.willGive}`}>₹0</div>
<div className={classes.span}>You will give</div>
</li>
<li className={classes.statsItem}>
<div className={`${classes.span} ${classes.willGet}`}>₹0</div>
<div className={classes.span}>You will get</div>
</li>
</ul>我想达到什么目的
现在是什么
我试过使用弯曲方向栏，但是它不适合我。
我的css代码：
const useStyles = makeStyles((theme) => ({
root: {
display: `${LAYOUT.FLEX}`,
justifyContent: 'space-between',
margin: '20px 16px',
minHeight: '87px',
borderRadius: '4px',
border: `solid 1px ${COLORS.GREY}`,
backgroundColor: `${COLORS.WHITE}`,
},
statsItem: {
display: `${LAYOUT.FLEX}`,
justifyContent: 'center',
alignItems: 'center',
flex: '1 1 auto',
'&:not(:last-child):after': {
content: 'close-quote',
border: `0.5px solid ${COLORS.LIGHT_GREY}`,
minHeight: '40px',
margin: 'auto',
},
},
span: {
fontSize: `${PIXEL_SIZE['14px']}rem`,
color: `${COLORS.TEXT_GREY}`,
},
willGive: {
color: theme.palette.success.main,
fontSize: `${1.41 * PIXEL_SIZE['14px']}rem`,
},
willGet: {
color: theme.palette.error.main,
fontSize: `${1.41 * PIXEL_SIZE['14px']}rem`,
},
}));在向statsItem添加flex方向时:列
Stack Overflow用户
发布于 2020-08-09 17:08:26
.lis{
display:flex;
flex-direction:column;}
li{
display:inline-block;
margin-right:20px;} <ul className='container'}>
<li className='lis'>
<div> c₹0</div>
<div>You will give</div>
</li>
<li className='lis'>
<div>₹0</div>
<div> will get</div>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63328923
复制相关文章
相似问题
腾讯云开发者
