html float图片和文字不重叠,如果a不设置float和display属性,如何让a标签和文字在同一行...

如果a不设置float和display属性,如何让a标签和文字在同一行

发布时间：2020-07-16 12:19:08

来源：51CTO

阅读：1117

作者：微宇宙

如何才能让文字和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等设置位置来达到垂直居中的方法，现在就可以使用这个，当然了，如果浏览器不支持伪类的话，那也就没有办法了。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样式 */