List-style-image in css cannot be accurately positioned through background simulation or relative positioning of li.

黄舟
Release: 2017-06-29 10:30:30
Original
1932 people have browsed it

This list-style-image positioning problem is also often asked. The solution is generally to use li background simulation. The relative positioning method can also be used here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh"> 
<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<title>blueidea</title> 
<style type="text/css"> 
li { 
list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif"); 
} 
li a { 
position:relative; 
top:-5px; 
font:12px/25px 宋体; 
} 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全</a></li> 
</ul> 
</body> 
</html>
Copy after login

The above is the detailed content of List-style-image in css cannot be accurately positioned through background simulation or relative positioning of li.. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template