html - 不同 block 中的标题文本没有响应

Question

在较小的屏幕设备上，以下内容出现在三个 block 中，而不是在同一个句子行中(见图)。所以我想要在较小的设备上:“我们在这里开始 if-statement-text-1，这就是结束”。如何修复？

我需要它在较小的屏幕上看起来像这样...

.text {
  background-color: red;
  padding:20px;
  }

<div class="header">Here we start
		<span class="text">if-statement-text-1</span>
		<span class="text">if-statement-text-2</span>and  this is the end!</div>

Answer 1

我不完全确定我完全理解你的目标，但是添加 display: inline-block; 到你的 .text 类应该让它看起来更接近您的目标。

.text {
  background-color: red;
  padding:20px;
  display: inline-block;
  }

<div class="header">Here we start
		<span class="text">if-statement-text-1</span>
		<span class="text">if-statement-text-2</span>and  this is the end!</div>