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

Question

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

           <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 现在我在将删除按钮定位到右侧时遇到问题，以便在所有列表项中它与边界的距离相同，（请看图片附上你会遇到问题）
请让我知道我能在这里做什么？？

Answer 1

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

这可行。

Answer 2

尝试应用这些样式：

待办事项元素 class :

{
 width: 100%
}

删除按钮：

{
 float: right
}

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

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