如果a不设置float和display属性,如何让a标签和文字在同一行
如何才能让文字和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等设置位置来达到垂直居中的方法,现在就可以使用这个,当然了,如果浏览器不支持伪类的话,那也就没有办法了。
<!DOCTYPEhtml><htmlclass="ua-winua-ff2"><head><metahttp-equiv="content-type"content="text/html;charset=UTF-8"/><metahttp-equiv="x-ua-compatible"content="ie=7"/><title>移动应用</title></head><body><divclass="hisData"><ul><li><imgsrc="https://www.baidu.com"class="help"alt="pic">可用金币</li></ul></div></body></html>
html,body{width:100%;height:100%;}body{font-family:"MicrosoftYahei";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;}.hisDataul{padding:10px20px;}.hisDatali{line-height:24px;font-size:16px;color:#949494;text-align:right;}.hisDatalia{width:20px;height:20px;font-size:100%;background-color:#335;border-radius:10px;}.hisDatalia.help:after{content:url(https://cache.yisu.com/upload/information/20200312/65/243140.jpg);}/*新增的css样式*/
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。