写html代码时div之间换行后浏览器页面inline-block子元素被挤到另一行的诡异问题

  1. 首页
  2. 前端
  3. 正文

至始至终都找不到一个好的标题来形容这个现象，不过在大量搜索资料后得知原因是
CSS的inline-block换行引发的间隙，最终也按大佬们的方法解决了问题，记录一下。
999.jpg

DEMO:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .list {width: 509px; border: 1px solid #cccccc;}
            .list div{ display: inline-block; color:#ffffff; background-color: cadetblue; width: 125px; margin-right: 3px; font-size: 18px; text-align: center; height: 60px; line-height: 60px;}
            .list div:nth-child(4n){margin-right: 0px;}
        </style>
    </head>
    <body>
        <h1>源代码换行产生 css间隙</h1>
        <div class="list">
            <div>床</div>
            <div>前</div>
            <div>明</div>
            <div>月</div>
        </div>
        
        <h1>源代码不换行 一切正常</h1>
        <div class="list">
            <div>床</div><div>前</div><div>明</div><div>月</div>
        </div>
        
        
        <h1>父元素增加 font-size:0;-webkit-text-size-adjust:none; 解决源代码换行产生 css间隙</h1>
        <div class="list" style="font-size:0;-webkit-text-size-adjust:none;">
            <div>床</div>
            <div>前</div>
            <div>明</div>
            <div>月</div>
        </div>
        
    </body>
</html>

标签: css

非特殊说明，本博所有文章均为博主原创。

最新文章

发表评论