我需要显示:在与<div>内联的内容之后。对于我正在使用的滑块(皇家滑块),我有数字输出的导航。我需要在输出之后显示“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;
}

最佳答案

您可以添加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>

这次使用的是同一个例子:
.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>

关于html - 在<div>内联后显示:after,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27842408/

10-09 15:15
查看更多