在与其他元素相同的行上显示React组件

我试图获得一个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; 
    } 
}

，最后的是什么样子的图片：

两者“非常好“，评级明星应该在同一条线上。任何想法如何解决这个问题？

来源

2017-04-26 crash springfield

输出的HTML是什么样的？我认为这与HTML + CSS更接近于React。 – Whymarrh

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

fiddle

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

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

来源

2017-04-26 20:28:20 Chad

如果您发布工作的jsfiddle或codepen它会更容易帮助。

尝试给你的overall-stars类display: inline-block。我认为它已经是一个块元素，这使得它出现在一个新的线上。

来源

2017-04-26 21:12:53

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

来源

2017-04-28 19:17:17

在与其他元素相同的行上显示React组件

回答

相关问题