Css 如何将材质ui图标向右对齐？

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

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

{allTodos.map（（todo，index）=>{
返回(
{todo}
）
}
)}

现在您可以看到{todo}和被放置在彼此相邻的位置，因此在输出中，它们也只是被放置在彼此相邻的位置，如所附图像所示（请确实看到）

要执行的代码如下所示

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

删除图标取自

材料界面/图标

现在我在将删除按钮定位到右侧时遇到了问题，因此在所有列表项中，它与边界的距离都是一致的（请参见随附的图片，您将遇到问题）
请让我知道我能在这里做什么

这可能行得通

---

这可能有效。

尝试应用以下样式：

todo元素类：

{
 width: 100%
}

删除按钮：

{
 float: right
}

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

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

---

尝试应用以下样式：

todo元素类：

{
 width: 100%
}

删除按钮：

{
 float: right
}

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

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

float成功了非常感谢你float成功了非常感谢你