时间戳

首页 > 解决方案 > React - 如何将字形图标对齐到最右边？

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

问题描述

我的 React 应用程序具有自动完成功能，在自动完成中我提供了列表和 glyphicon，然后如果我单击 glyphicon，内容将被插入到 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>

标签： htmlcssreactjs

解决方案

您可以使用 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;
}

推荐阅读