显示 :after content inline with <div>

Question

我需要显示 :after 与 <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>

假设您指的是较小的 resolutions/windows。因为在其他情况下会按预期工作。

没有 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>

显示 :after content inline with <div>

Display :after content inline with <div>

html

css