反应 js CSS 样式在与标题字符串相同的行上获得字体真棒图标

Question

我已经坚持了一段时间了。我无法在同一行上获得标题和字体真棒图标。标题位于第一行，图标呈现在其之后的行上。当我按 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>

在我的样式代码中

.titleStyle
display: inline
.iconStyle
margin: 0px
padding: 0px
display: inline

任何帮助，不胜感激。谢谢

Answer 1

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

您使用div默认情况下具有 css 样式display: block的元素，这意味着每个div都将采用可用的全宽，因此下一个元素将从下一行开始。如果下一个元素的样式与 css 类.iconStyle一样使用display: inline，它仍将呈现在块元素之后的下一行。长话短说，只需在文本后渲染图标

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

如您所见，我在图标中添加了另一个 css 类some-other-css-class，因此您可以根据需要设置它样式。

一些深入的答案和你犯的一些错误：

className="styles.boldStyle"不是有效的CSS类，你可能的意思是className={styles.boldStyle}，这也适用于className={styles.titleStyle}。

Fontawesome图标是用style: inline-block渲染的，这意味着它们的行为就像文本中的小图像，不会破坏文本流。外部元素的text-sizecss 属性也将应用于它们。通常，您将图标放在文本之前或之后，但不放在额外的div元素中。

还有一个提示：如果你有一个标题元素，比如标题 - 你应该根据标题的深度使用<h1>来<h5>，这是基本的SEO，在开发过程中不会花费任何额外的时间。

总而言之，您的代码应如下所示：

.JS：

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

风格：

.titleStyle
font-weight: bold