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