與其他元素在同一行顯示 React 組件

Question

我正在嘗試讓我構建的 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;
  }
}

最后，一張它的外觀圖片：

“VERY GOOD”和評級星級應該在同一條線上。 知道如何解決這個問題嗎？

Answer 1

如果您在 of.top 中有兩個子元素，這應該可以工作。

小提琴

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

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

Answer 2

根據@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;
  }
}

Answer 3

如果您發布了一個有效的 jsfiddle 或 codepen，它會更容易提供幫助。

嘗試給你的overall-stars class display: inline-block 。 我假設它已經是一個塊元素，這使得它出現在一個新行上。

Answer 4

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

可能有幫助。