Question

我需要显示：内容与<div>内联后。对于我正在使用的滑块（Royal Slider），我有数字导航输出。我需要在输出后显示“PHOTOS”这个词，但是与它内联。

目前我的代码输出：

1 2 3 4 5 6 7
PHOTOS

我需要：

1 2 3 4 5 6 7 PHOTOS

HTML

<div class="numNav">1 2 3 4 5 6 7</div>

CSS

.numNav {
    display: inline-block;
}
.numNav:after {
    content: "PHOTOS";
    display: inline-block;
}

Answer 1

您可以添加white-space: nowrap;之类的内容：

.numNav {
  display: inline-block;
  white-space: nowrap;
}
.numNav:after {
  content: "PHOTOS";
  display: inline-block;
}

<div class="numNav">1 2 3 4 5 6 7 </div>

假设您正在引用较小的分辨率/窗口。其他情况下的原因可以解释。

没有whitespace: nowrap和小宽度的示例：

.numNav {
    display: inline-block;
    width: 100px;
    /*white-space: nowrap;*/
}

.numNav:after {
    content: "PHOTOS";
    display: inline-block;
}

<div class="numNav">1 2 3 4 5 6 7 </div>

这次使用whitespace: nowrap：

的相同示例

.numNav {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
}
.numNav:after {
  content: "PHOTOS";
  display: inline-block;
}

<div class="numNav">1 2 3 4 5 6 7 </div>

显示：内容与<div> </div>内联后

1 个答案: