与其他元素在同一行显示 React 组件答案

【问题标题】：Displaying React component on same line as other elements与其他元素在同一行显示 React 组件
【发布时间】：2021-03-16 22:13:28
【问题描述】：

我正在尝试让我构建的 React 组件显示在与其余文本相同的行上，但它始终显示在与其余元素不同的行上。

这是我的 React 代码：

<div className={styles['top']}>
    <span>WHAT PEOPLE ARE SAYING</span>
    <div className={`pull-right ${styles['right']}`}>
      <span className={`${styles['rating-words']}`}>{ratingWords}</span>
      <Rating className={`${styles['overall-stars']}`}
              percentage={this.state.overallPercentage}
              color={"#00c18a"}
              under={"white"}
      />

    </div>
  </div>

和 .scss：

.top {
  margin: 30px 0;
  font-weight: bold;
  .right {
    display: inline-block;
    flex-direction: row;
  }
  .rating-words {
    text-transform: uppercase;
  }
}

最后是它的样子：

“非常好”和评级星应该在同一行。知道如何解决这个问题吗？

【问题讨论】：

输出的 HTML 是什么样的？我认为这与 HTML+CSS 的关系比与 React 的关系更大。

标签： javascript reactjs sass

【解决方案1】：

根据@Chad 所说的，我最终让它与以下内容一起工作，尽管 @torkjels 所说的最终在另一个地方工作得更好。

.top {
  margin-top: 40px;
  margin-bottom: 30px;
  font-weight: bold;
  .right {
    display: inline-flex;
    flex-direction: row;
  }
  .rating-words {
    text-transform: uppercase;
    margin-right: 10px;
  }
  .overall-stars {
    margin-top: -2px;
  }
}

【讨论】：

【解决方案2】：

如果您在 .top 中有两个子元素，这应该可以工作。

fiddle

.top {
  margin: 30px 0;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .rating-words {
    text-transform: uppercase;
  }
  .right {
  }
}

【讨论】：

【解决方案3】：

如果您发布了一个有效的 jsfiddle 或 codepen，它会更容易提供帮助。

试着给你的overall-stars 上课display: inline-block。我假设它已经是一个块元素，这使它出现在一个新的行上。

【讨论】：

【解决方案4】：

const top = {
    // Other styles
    display: 'flex',
    flexDirection: 'row',
}

可能会有帮助。

【讨论】：