首页 > 代码库 > 如果a不设置float和display属性,如何让a标签和文字在同一行
如果a不设置float和display属性,如何让a标签和文字在同一行
如何才能让文字和a(空内容)在一行显示。首先ul包含li,设置li整体内容靠右,text-align: right;这时候,你会看到文字居左了,这个a链接不会居左。
如果我要让a显示在文字的前面,随着文字的增多或减少a仍然在文字的前面,现在设置a的css背景background-color: #335 ;还是看不到效果。于是我设置了a的伪类a:after{},设置伪类的内容content:url(http://www.cnblogs.com/images/cnblogs_com/hao5599/695043/t_transparentbg.png);然后就看到文字的前面有深黑色背景了。设置a和文字在一行,且图片在文字的前面,可以不用设置float和display、position等设置位置来达到垂直居中的方法,现在就可以使用这个,当然了,如果浏览器不支持伪类的话,那也就没有办法了。
<!DOCTYPE html> <html class="ua-win ua-ff2"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="x-ua-compatible" content="ie=7"/> <title>移动应用</title> </head> <body > <div class="hisData"> <ul> <li><img src="https://www.baidu.com" class="help" alt="pic">可用金币</li> </ul> </div> </body> </html>
html, body { width: 100%; height: 100%; } body { font-family: "Microsoft Yahei"; font-size: 12px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } ul,li { list-style: none; } .hisData { line-height: 24px; } .hisData ul { padding:10px 20px; } .hisData li { line-height: 24px; font-size: 16px; color: #949494; text-align: right; } .hisData li a { width: 20px; height: 20px; font-size: 100%; background-color: #335 ; border-radius:10px; } .hisData li a.help:after{content: url(http://www.cnblogs.com/images/cnblogs_com/hao5599/695043/t_transparentbg.png);}/* 新增的css样式 */
本文出自 “kosig” 博客,请务必保留此出处http://kosig.blog.51cto.com/9218084/1911208
如果a不设置float和display属性,如何让a标签和文字在同一行
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。