如何在宽度未知的文本右侧使用精灵?
给出以下示例: http://cl.ly/2UAa
如何在“查看更多”右侧使用精灵...”行,以便它始终根据文本的宽度进行调整?我应该创建一个与文本一起浮动的单独元素,还是有办法直接在链接中执行此操作。
Given the following example:
http://cl.ly/2UAa
How do I use a sprite on the right side of the "see more..." line so that it always adjusts with the width of the text? Should I create a separate element that will float with the text, or is there a way to do it directly within the link.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以将其应用到链接的背景,将其右对齐并为链接提供正确的填充。
You can apply it to the background of the link, align it right and give the link a right padding.
我最喜欢的方法是使用伪元素并将图像设置为内容;
您还可以在元素之前创建伪元素,或者使用文本而不是图像作为内容;
\25BA 是右向箭头的 CSS 转义字符,但您可以将任何文本放在引号中。
当然,您也可以按照 jeroen 的建议使用后台方法,这两种方法都适用于不同的情况。
My favorite method is to use a pseudo element and set the image as content;
You can also create a pseudo element before an element, or use text instead of an image as content;
\25BA is the CSS escape character for a right pointing arrow, but you can put any text in quotes.
Of course, you can also use the background method as jeroen suggested, and both methods are useful for different situations.