css - ul 内li 间距问题
本文介绍了css - ul 内li 间距问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我准备实现一个3D导航栏，ul 里的li 存在默认间距，使用margin-right后，chrome和edge出现偏差，这应该是浏览器默认的样式，这里又不存在什么外边距合并的问题，只能换另外一种思路解决，好多人说用 *{margin：0； padding：0；}，要是能解决，我就不在这问了，求救大神，chrome里设定margin-right:-9px; edge 里设定 margin-right: -4px; 如何不通过这种方式，实现这两个浏览器的兼容。代码如下：
<body>
<ul id="three">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Music</a></li>
</ul>
</body>样式
<style type="text/css">*{margin: 0; padding: 0;}
ol,ul,li {list-style: none; text-decoration: none;}
body {background-color: #bebebe;}
#three {width:660px; padding: 0 20px; margin: 20px auto; background-color: #f65f57; box-shadow: 0px 7px 5px #ba4a45; border-radius: 8px; text-align: center; }
#three li{position: relative; padding: 10px 20px; display: inline-block; list-style: none outside none; margin:0; }
#three a{display: inline-block; text-decoration: none; font: bold 20px/1 Arial; color: #fff; text-shadow:1px 2px 4px rgba(0,0,0,.5);}
#three li::after {content:""; position: absolute; top: 8px; width: 1px; height: 24px; background: linear-gradient(to top, #ff625a, #9e3e3a 50%, #ff625a);}
#three li::after {right: 0;}
#three li:last-child::after {display: none;}
/*动效*/
#three a:hover {transform: rotate(10deg); -webkit-transform: rotate(10deg);}
#three a {transition: all .2s ease-in ;}
</style>
有一种兼容的办法是，不使用::before 伪类，只使用::after伪类
<style type="text/css">* {margin: 0; padding: 0;}
ol,ul,li {list-style: none; text-decoration: none;}
body {background-color: #bebebe;}
#three {width:660px; padding: 0 20px; margin: 20px auto; background-color: #f65f57; box-shadow: 0px 7px 5px #ba4a45; border-radius: 8px; text-align: center; }
#three li{position: relative; padding: 10px 20px;
display: inline-block; list-style:
none outside none; }
#three a{display: inline-block; text-decoration: none; font: bold 20px/1 Arial; color: #fff; text-shadow:1px 2px 4px rgba(0,0,0,.5);}
#three li::after {content:""; position: absolute; top: 8px; width: 1px; height: 24px; background: linear-gradient(to top, #ff625a, #9e3e3a 50%, #ff625a);}
#three li::after {right: 0;}
#three li:last-child::after {display: none;}
/*动效*/
#three a:hover {transform: rotate(10deg); -webkit-transform: rotate(10deg);}
#three a {transition: all .2s ease-in ;}虽然能解决，但是两个li的间距还是存在？？？？？？？？？？？？？？？
解决方案
将ul的font-size设置为0，同时设置word-spacing和letter-spacing为负值，然后再设置li的字体大小.
ul {
font-size: 0;
/* 以下两个属性的值根据你的具体情况而定 */
letter-spacing: -1px;
word-spacing: -1px;
}
ul li {
display: inline-block;
width: 50px;
height: 30px;
color: #ffffff;
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
background-color: black;
}这篇关于css - ul 内li 间距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
