需要在开始时显示一个元素，在最右边显示另一个

【问题标题】：Need to display one element at start and another at extreme right需要在开始时显示一个元素，在最右边显示另一个
【发布时间】：2019-11-07 15:01:40
【问题描述】：

enter image description here我正在使用这种反应语法，需要显示包名和价格，价格在最靠近下拉列表的地方

<Select className="bags-list">
  {(this.props.bags).map(bag => (
    <option key={ bag.Name } value={ bag.Name }>
      { bag.Name } {'$'}{(bag.sellPrice) ? bag.sellPrice : bag.Price}
    </option>
  )}
</Select>

【问题讨论】：

至少将您的代码格式化为代码...
@MYS 你能分享一下你想要的图片吗

标签： javascript html reactjs

【解决方案1】：

您可以在<option /> 标签之间呈现任何您想要的内容。所以你可以做这样的事情

<option key={bag.Name} value={bag.Name} className="option">
  <p>{bag.Name}</p>
  <p>`$ ${bag.sellPrice || bag.Price)}`</p>
</options>

现在您可以为您的选项设置样式，并且它是子项，就像您使用任何其他 HTML 标记一样。像这样的东西应该可以解决问题：

.option {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

【讨论】：