如何将material-ui图标右对齐？答案

【问题标题】：How to align material-ui icons to right?如何将material-ui图标右对齐？
【发布时间】：2021-05-06 16:58:04
【问题描述】：

我有一个由以下代码生成的动态生成列表

           <list className = "todos-list">
                        {allTodos.map((todo, index)=> {
                            return (
                            <li className = "todo-element"> {todo} <DeleteButton id= {index} 
                            callBackFunction = {deleteItem}/> </li>)
                        }
                        )}
           </list>

现在您可以看到 {todo} 并彼此相邻放置，因此在输出中它们也只是彼此相邻放置，如附图所示（请查看）

代码如下所示

<span className = "DeleteButton"><DeleteIcon onClick = {deleteMain}/></span>

删除图标取自material-ui/icons 现在我在将删除按钮定位到右侧时遇到问题，以便在所有列表项中它与边界的距离一致，（请参阅所附图片，您将获得问题）
请让我知道我可以在这里做什么？？

【问题讨论】：

标签： css reactjs express material-ui web-development-server

【解决方案1】：

尝试应用这些样式：

待办事项类：

{
 width: 100%
}

删除按钮：

{
 float: right
}

如果您为按钮使用内联样式：

<DeleteButton style={{ float: 'right' }} id={index} callBackFunction = {deleteItem}/>

【讨论】：

【解决方案2】：

#parent-element {
position:absolute;
}
.DeleteButton{
position:relative;
right:5;
}

这可以工作。

【讨论】：