CSS li列表前小圖示

admin發表於2020-04-01
CSS

實際的應用中，很多列表結構前面有小圖示，形式有多種多樣。

下面通過程式碼例項介紹一下如何在 li 列表新增箭頭圖示。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
ul li{
  list-style:none;
  font-size:12px;
  width:250px;
  height:30px;
  line-height:30px;
  padding-left:20px;
  background:url(mytest/demo/antzonebg.jpg) no-repeat 0px 6px;
}
</style>  
</head>  
<body>  
<ul>
  <li>只有努力奮鬥才會有美好的未來。</li>
  <li>螞蟻部落歡迎您，分享互助是本站的宗旨。</li>
  <li>每一天都是新的，請好好珍惜。</li>
  <li>當下的時間才是切實的，請不要說下一刻。</li>
  <li>沒有人一開始就是高手。</li>
</ul>
</body>  
</html>

下面對需要注意的幾點做一下簡單介紹：

（1）.設定 padding-left 是為了給背景圖片留出空間。

（2）.background 設定背景圖片，並且調整圖片的位置，預設狀態下不會和文字垂直居中。

相關文章