如何才能让文字和a(空内容)在一行显示。首先ul包含li,设置li整体内容靠右,text-align: right;这时候,你会看到文字居左了,这个a链接不会居左。
如果我要让a显示在文字的前面,随着文字的增多或减少a仍然在文字的前面,现在设置a的css背景background-color: #335 ;还是看不到效果。于是我设置了a的伪类a:after{},设置伪类的内容content:url(https://cache.yisu.com/upload/information/20200312/65/243140.jpg);然后就看到文字的前面有深黑色背景了。设置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(https://cache.yisu.com/upload/information/20200312/65/243140.jpg);}/* 新增的css样式 */
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。