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

我的React App具有自动完成功能，在自动完成功能中，我提供列表和glyphicon，然后如果我单击glyphicon，则内容将插入到MongoDB中。

无论如何，我尝试将glyphicon调整到最右边，但是我不能这样做。如果我将其移至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>

最佳答案

您可以使用flexbox对齐项目。

在文本上添加跨度

<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;
}

关于html - React-如何将字形图标最右对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50520578/