Css 保持<；img>；始终位于文本行的末尾

是否有任何CSS解决方案使pdf/doc/ppt图标始终位于文本行的末尾，而不使用背景图像？当没有足够的空间放置图标图像时，它将单独位于第二行。我想知道是否有类似于

空白：nowrap

<ul>
    <li>
        <a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.  (3MB, PDF)</a>
        <img src="images/pdf.gif" />
    </li>
</ul>

---

具有固定的宽度。

您可以将内联子项添加到列表项中，并为其提供背景图像

ul li a:after {
    content: url('http://placekitten.com/16/16');
}

<ul>
  <li><span class='bg'><a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.  (3MB, PDF)</a></span></li>
</ul>

---

请参见此处的演示：

从布局的角度来看，图像是文本或“内联内容”。因此，可以使用与防止文本中换行相同的技术。nobr标记可以防止换行，并在浏览器中普遍使用，尽管标准编写者对此表示不满。如果需要，您可以在CSS中使用它的标准化、不太可靠、更详细的姐妹：

whitespace:nowrap

，以及一些内联标记，如

span

这里的问题是您需要“重叠”标记：<代码>（3MB，PDF） 或

（3MB，PDF）

你的问题不够清楚。当空间用完时，文本和图像会发生什么变化？为什么不使用背景图像？一个很好的方法是使用一个属性选择器，比如

A[href$='.pdf']

，然后将你的图标作为图像添加到那里。

-->

我相信OP希望图像“粘贴”到

，而不是单独出现在下一行。好像它是带有

空白的文本的最后一个字：nowrap

图像

？你是说

img

？您正在寻找

浮点：right

？例如，

有一个固定的宽度200px，当占据190px时，（15px）将进入第二行。我想知道，即使没有足够的空间，我们是否能一直呆在第一线。我们知道，通过使用“空白：nowrap”，文本将永远不会换行到下一行。那么，我们是否还有类似的解决方案？使用：after时，我们似乎无法控制图像位置。修补程序中使用的图像未加载（无效URL），因此我无法判断定位和填充是否构成灵活的方法。；-）@GregPettit我想这只是小叮当把事情弄糟了。在我的alpha-jsFiddle-ripoff-warning中查看它，这个站点只在chrome中工作，并且将挂起firefox。你可以移动预览“窗口”并调整其大小以查看效果。我不知道发生了什么，但该链接不可用。将其复制并粘贴到地址栏中，Github将为您提供一个“未找到存储库”。很抱歉（我的意思是图像。只是bg中使用的图像）@GregPettit/你不认为将其作为内联元素上的背景图像会更好吗？该链接可以保持完整，并且不需要空白空间技巧。正确，将此视为内容问题，让用户简化文本。但就我个人而言，我会选择属性选择器解决方案。@GGG，问题是“不使用背景图像”。除此之外，打印文档时，背景图像通常不会出现。@JukkaK.Korpela他在评论中还说“背景图像和属性选择器是一个出色的解决方案…”我看不出这种方法在任何方面都比背景图像更好。如果打印是必须的，并且

img

已经在DOM中，他可以简单地使用

屏幕

媒体规则隐藏

img

。

li .bg {
  background-image: url(...);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  padding-right: 24px
}

<a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.</a>  (3MB, <nobr>PDF)
<img src="images/pdf.gif" alt=""></nobr>

<a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.</a>  (3MB, <span 
style="white-space: nowrap">PDF) <img src="images/pdf.gif" alt=""></span>