我试图让我构建的 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”和评级星级应在同一行。知道如何解决这个问题吗?
最佳答案
如果 .top 中有两个子元素,这应该可以。
.top {
margin: 30px 0;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: space-between;
.rating-words {
text-transform: uppercase;
}
.right {
}
}
关于javascript - 与其他元素在同一行显示 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43643553/