ul 内li 间距问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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>

展开
收起
杨冬芳 2016-06-12 14:22:00 1618 0
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
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载