html - React - 如何将字形图标对齐到最右边？

Question

我的 React 应用程序具有自动完成功能，在自动完成功能中我提供了列表和字形图标，然后如果我单击字形图标，内容将被插入到 MongoDB 中。

无论如何，我尝试将字形图标对齐到最右边，但我做不到。如果我将它移到 li 之外，语法就会出错。

以下是截图。

字形对文本是封闭的，但它应该在最右边。

我的代码如下:

<li key={_id}>{itemname}
  <i className="glyphicon glyphicon-edit" onClick={() => 
  this.addToReceiving(
    itemid, 
    barcode, 
    itemname, 
    category, 
    stocktype, 
    itemtype, 
    wholesaleprice, 
    retailprice, 
    quantitystock, 
    receivingquantity, 
    description, 
    comment)}>
  </i>
</li>

Answer 1

您可以使用 flexbox 来对齐元素。

给文本添加一个span

<li key={_id}>
  <span>{itemname}</span>
  <i className="glyphicon glyphicon-edit" onClick={() => 
  this.addToReceiving(
    itemid, 
    barcode, 
    itemname, 
    category, 
    stocktype, 
    itemtype, 
    wholesaleprice, 
    retailprice, 
    quantitystock, 
    receivingquantity, 
    description, 
    comment)}>
  </i>
</li>

试试这个:-

li {
  display: flex;
  //This will push both child elements to far corner
  //You can also try justify-content: space-around; if you want some space in the corner
  justify-content: space-between;
}