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>
展开
收起
1
条回答
写回答
写回答
-
IT从业将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; }2019-07-17 19:33:59赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
