Question

是否有任何CSS解决方法使pdf / doc / ppt图标始终位于文本行的末尾，而不使用背景图像？当图标图像没有足够的空间时，它将仅位于第二行。我想知道是否有与white-space:nowrap类似的东西？

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

<ul>有固定的宽度。

Answer 1

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

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

...

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

在此处查看演示：http://tinkerbin.com/qbwNWFBb

Answer 2

从布局的角度来看，图像是文本或“内联内容”。因此，您可以使用与防止文本中的换行相同的技术。 nobr标记可以防止换行符并在浏览器中普遍使用，尽管标准编写者对此不以为然。如果需要，您可以使用其标准化，不太可靠，更冗长的姐妹：CSS中的white-space: nowrap，以及span等内联标记。

问题在于您需要“重叠”标记：... (3MB, <nobr>PDF)</a><img ...></nobr>（即在nobr元素中打开a元素，但关闭a在nobr之前。虽然这有效，但它违反了HTML语法规则，所以我建议你从a元素中移出一些文本（它可能不需要在那里）：

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

Answer 3

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

始终将<img/>保留在文本行的末尾

3 个答案: