星空网 > 软件开发 > 网页设计

自学CSS碰到的“坑”(1):inline

一开始我想设置一个导航栏,宽度充满整个屏幕的,每个子导航的宽度相同,均分导航栏的宽度,效果图如下(为了说明均分,我给每个子导航特意加了背景颜色):

自学CSS碰到的“坑”(1):inline

然后我开始写HTML代码,很简单啦,如下:

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <meta charset = "utf-8"> 5   <title>inline-block</title> 6 </head> 7 <body> 8   <ul class="main-nav"> 9     <li><a href="#">Home</a></li>10     <li><a href="#">Pros</a></li>11     <li><a href="#">News</a></li>12     <li><a href="#">Jobs</a></li>13   </ul>14 </body>15 </html>

然后开始设置CSS代码:

1 body{margin: 0 auto;}2 .main-nav{width:100%;font-size:20px;height: 30px;line-height: 30px;text-align: center;background-image:linear-gradient(black,#ccc,black) ;
margin: 0;padding: 0;}3 .main-nav li{display: inline-block; list-style:none;height: 100%;width:25%;}

发现结果变成了下面这样:

自学CSS碰到的“坑”(1):inline

li各占宽度的25%,不应该是像效果图那样平铺一整行吗?看到li之间有空隙,我以为是margin或padding等造成的,我就把li元素的margin和padding都设置为0,发现并无卵用。

然后就各种查资料,才得知:HTML中的换行符、空格符、制表符等空白符,字体大小不为0的情况下,空白符占据一定宽度,使用inline-block会产生元素间的空隙;可以使用word-spacing设置负值来解决,但是空隙会随着字体大小变化而变化,当字体大小改变了,word-spacing的值也得重新设置;或者使用float方法,更简单易一些。针对我的问题,把.main-nav设置{word-spacing:-10px;}或者.main-nav li设置{float:left;}就解决了。

有关inline-block更深入的了解,推荐参考脚本之家《带你深入剖析inline-block属性值的前世今生》




原标题:自学CSS碰到的“坑”(1):inline

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊印度站下调Prime会员费,一大波买家正在靠近:https://www.kjdsnews.com/a/1701364.html
速卖通巴西接入Google Pay支付方式!:https://www.kjdsnews.com/a/1701365.html
多发货跨境物流|高温热浪席卷圣诞季 巴西人涌向网络购买消暑用品:https://www.kjdsnews.com/a/1701366.html
货物清关需要提交什么资料?承接德国物流清关:https://www.kjdsnews.com/a/1701367.html
1月跨境营销日历出炉!8大热卖节点,抢占2024出海先机!:https://www.kjdsnews.com/a/1701368.html
瑞幸咖啡加速出海,在新加坡一年开出30家门店:https://www.kjdsnews.com/a/1701369.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流