并排显示文本答案

【问题标题】：Display text side by side并排显示文本
【发布时间】：2022-01-04 01:52:17
【问题描述】：

您好，我有以下代码：

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <div class="quotes">
    <h1> Text</h1>
  </div>
  <div class="quotes">
    <h1> Change</h1>
  </div>
</h1>
</section>

唯一的问题是文本在不同的行上对齐，我希望文本在同一行或彼此相邻，中间有一些边距。我该如何解决？

另外，我怎样才能使文本在到达单词 change 时停止交替？基本上，它应该只在文本 once 之间交替，并停在单词 change

【问题讨论】：

了解display 属性。或任何其他使用 CSS 进行布局的方式。（弹性盒、网格、浮动）
您可以尝试将 2 个具有 ''quotes'' 类的 div 放在一个容器中并让该容器显示：flex;或者将第二个 ''quotes'' h1 变成一个跨度，或者只是将它嵌套到一个跨度中。
@drinos，你能展示一下吗？另外，我还想做一件事。请看我更新的帖子
@user2345，我之前没有真正使用过jQuery（如果那甚至是jQuery），也许你可以尝试添加一个return；在函数的末尾。

标签： javascript html jquery css

【解决方案1】：

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 display: flex;
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <div class="quotes">
    <h1> Text</h1>
  </div>
  <div class="quotes">
    <h1> Change</h1>
  </div>
</h1>
</section>

只需将 display: flex 属性添加到您的 h1 标记，默认情况下 div 是块范围的，因此它们占据整行。

【讨论】：

我还想做一件事。请看我更新的帖子
你可以添加一个if条件来检查引用是否等于'change'，如果它只是返回函数。
你能快点显示pleaseE吗？