html - react js css 样式在与标题字符串相同的行上获取 Font Awesome 图标

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

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

您使用 div具有 css 样式的元素 display: block默认情况下，这意味着每个 div将占用可用的全部宽度，因此下一个元素将从下一行开始。如果下一个元素的样式为 display: inline作为你的 CSS 类 .iconStyle也就是说，它仍然会在 block 元素之后的下一行呈现。长话短说，只是在文本之后渲染图标

<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-size外部元素的 css 属性也适用于它们。通常，您将图标放在文本之前或之后，但不会放在额外的 div 元素中。

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

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

JS:

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

样式:

.titleStyle
  font-weight: bold