css - 如何在 Material UI 的表格列中将图像移到文本左侧？

Question

我试图搞乱内联样式，将图像移动到特定列中文本的左侧，但对于某些行，图像重叠或文本太靠右，如下所示这张图片:

/image/QddSC.png

 <TableCell align="right" > <Avatar src={n.image} style={{width: 25, height: 25, position: 'absolute'  }}/> <span style={{color: '#0066ff', cursor: 'pointer' }} >{n.name}</span> </TableCell>

有谁知道如何移动文本左侧的图像并修复这些间隙和重叠问题，谢谢。

Answer 1

试试下面的代码:

<TableCell align="right" > 
    <Avatar src={n.image} style={{width: 25, height: 25, display: 'inline-block', vertical-align: 'top'  }}/> 
    <span style={{color: '#0066ff', cursor: 'pointer',  display: 'inline-block', vertical-align: 'top', width: 'calc(100% - 35px)' }} >{n.name}</span> 
</TableCell>