css - Flex-direction 行和 justify-content : flex-start not working

Question

我想显示一个公式，当悬停在某些文本上时会显示一个 div/message。我希望我的 div 显示为一行，因此内容应如下所示:

P(1 + R/N)nt

现在它们显示为一列:

P
(1 +
R/
N)
n
t

这是我的代码:

<div key="4">
                <b>How did we get these numbers?</b>
                <div className="equation">
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            P
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            (1 +
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            R/
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            N)
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>n</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>t</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                </div>
            </div>

我的情感 CSS 样式:

const equation = css`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
`;

这是一个沙箱:https://codesandbox.io/s/emotion-pl9m3

Answer 1

'equation' css 类的样式化组件语法是错误的。如果您检查您的页面，您会注意到类等式的 css 没有应用于您的父 div。正确的语法是这样的:

<Equation>
  <div></div>
  <div></div>
  ...
</Equation>

const Equation = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

工作沙箱: https://codesandbox.io/embed/emotion-xupvk