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

Posted 2023-03-06

【中文标题】如何在 Material UI 的表格列中将图像向左移动？

【英文标题】：How to move an image left of text in a table column in 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>

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

【参考方案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>

【讨论】：

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