![](/img/trans.png)
[英]React Native Elements Line underneath FormInput Component
[英]Displaying React component on same line as other elements
我正在尝试让我构建的 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”和评级星级应该在同一条线上。 知道如何解决这个问题吗?
如果您在 of.top 中有两个子元素,这应该可以工作。
.top {
margin: 30px 0;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: space-between;
.rating-words {
text-transform: uppercase;
}
.right {
}
}
根据@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;
}
}
如果您发布了一个有效的 jsfiddle 或 codepen,它会更容易提供帮助。
尝试给你的overall-stars
class display: inline-block
。 我假设它已经是一个块元素,这使得它出现在一个新行上。
const top = {
// Other styles
display: 'flex',
flexDirection: 'row',
}
可能有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.