<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.unpaid ul {
display: flex;
justify-content: space-around;
list-style: none;
text-align: center;
}
.unpaid ul li {
flex: 1;
}
.unpaid ul li a {
text-decoration: none;
}
.unpaid ul li a img {
width: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>待支付</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>进行中</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>已完成</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>已取消</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>分割</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>全部</p>
</a>
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.unpaid ul {
display: flex;
justify-content: space-around;
list-style: none;
text-align: center;
}
.unpaid ul li {
flex: 1;
}
.unpaid ul li a {
text-decoration: none;
}
.unpaid ul li a img {
width: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>待支付</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>进行中</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>已完成</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>已取消</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>分割</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>全部</p>
</a>
</li>
</ul>
</div>
</body>
</html>
请采纳
温馨提示：答案为网友推荐，仅供参考
第1个回答 2019-11-28
可以使用开发者工具进行调试
第2个回答 2019-11-28
你这个应该是<li>的自带的样式里有间距，
可以F12调试一下，一般是padding或者margin在作怪。
希望能帮到你。
可以F12调试一下，一般是padding或者margin在作怪。
希望能帮到你。
第3个回答 2019-11-29
你好，你这个是li设置了内边距，你注意看每个图标移动上去的时候有没有手形
因为里面是A标签，如果你移动过去之间都是手形，就说明是加了内边距
如果没有手形，就是外边距，把外边距调到0，内边距调整到2px左右即可了。
因为里面是A标签，如果你移动过去之间都是手形，就说明是加了内边距
如果没有手形，就是外边距，把外边距调到0，内边距调整到2px左右即可了。
第4个回答 2019-12-22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.unpaid ul {
display: flex;
justify-content: space-around;
list-style: none;
text-align: center;
}
.unpaid ul li {
flex: 1;
}
.unpaid ul li a {
text-decoration: none;
}
.unpaid ul li a img {
width: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>待支付</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>进行中</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>已完成</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>已取消</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>分割</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>全部</p>
</a>
</li>
</ul>
</div>
</body>
</html>
请采纳
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.unpaid ul {
display: flex;
justify-content: space-around;
list-style: none;
text-align: center;
}
.unpaid ul li {
flex: 1;
}
.unpaid ul li a {
text-decoration: none;
}
.unpaid ul li a img {
width: 50%;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>待支付</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>进行中</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>已完成</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1574060297099.png@100h_100w.jpg" alt="">
<p>已取消</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1568604177911.jpg@100h_100w.jpg" alt="">
<p>分割</p>
</a>
</li>
<li>
<a href="">
<img src="http://iconfont.alicdn.com/t/1558509957375.jpg@100h_100w.jpg" alt="">
<p>全部</p>
</a>
</li>
</ul>
</div>
</body>
</html>
请采纳
相似回答