如果a不设置float和display属性,如何让a标签和文字在同一行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果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标签和文字在同一行的主要内容，如果未能解决你的问题，请参考以下文章
505，display，float，position之间的关系（有疑问）
display,float,position的关系以及display=table,table-row,table-cell等属性的使用
如何理解CSS中的display:inline-block属性？