如何在 Material UI 的表格列中将图像向左移动？答案

【问题标题】：How to move an image left of text in a table column in Material UI?如何在 Material UI 的表格列中将图像向左移动？
【发布时间】：2019-11-10 11:45:35
【问题描述】：

我尝试使用内联样式将图像移动到特定列中文本的左侧，但对于某些行，图像重叠或文本离右侧太远，如这张图片：

https://i.stack.imgur.com/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>

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

【问题讨论】：

标签： css reactjs html-table material-ui

【解决方案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>

【讨论】：

我不得不弄乱宽度和高度值，但代码有效。非常感谢。