溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何才能讓文字和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樣式 */免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
