Html react js css样式在标题字符串的同一行上获得字体很棒的图标

我在这件事上有点纠结了。我无法在同一行中获得标题和字体图标。标题在第一行，图标在其后一行呈现。当我点击F12时，我看到图标的宽度占据了整条线。我试着增加宽度，但不起作用。这是我的密码

<div className="styles.titleStyle">
  <div className="styles.boldStyle">
    {"MyTitle"}
  </div>
  <div className="iconStyle">
    <i className="fa fa-arrow-right fa-lg"></i>
  </div>
</div>

---

感谢您的帮助。谢谢

这实际上与react没有任何关系，它只是基本的HTML和CSS

默认情况下，您使用的

div

元素具有css样式

display:block

，这意味着每个

div

将采用可用的全宽，因此下一个元素将从下一行开始。如果下一个元素的样式为

display:inline

，与css类

.iconStyle

相同，则它仍将在块元素后的下一行呈现。长话短说，只需在文本后渲染图标

<div className="styles.boldStyle">
    {"MyTitle"} <i className="fa fa-arrow-right fa-lg some-other-css-class"></i>
</div>

风格：

.titleStyle
  font-weight: bold

---

实际上，这与react完全无关，它只是基本的HTML和CSS

默认情况下，您使用的

div

元素具有css样式

display:block

，这意味着每个

div

将采用可用的全宽，因此下一个元素将从下一行开始。如果下一个元素的样式为

display:inline

，与css类

.iconStyle

相同，则它仍将在块元素后的下一行呈现。长话短说，只需在文本后渲染图标

<div className="styles.boldStyle">
    {"MyTitle"} <i className="fa fa-arrow-right fa-lg some-other-css-class"></i>
</div>

风格：

.titleStyle
  font-weight: bold

---

您是否尝试过

上的
显示：flex
。标题样式

？谢谢。你试过

.titleStyle

上的

display:flex

了吗？谢谢。成功了