V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
fetich
V2EX  ›  问与答

初级前端问题——宽度足够的情况下为什么会换行

  •  
  •   fetich · 2016-07-25 23:34:57 +08:00 · 2365 次点击
    这是一个创建于 3028 天前的主题,其中的信息可能已经有所发展或是发生改变。

    示例很简单,直接贴上了:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>UN</title>
        <style> 
        * {
            padding: 0;
            margin: 0;
            font: 14px "Microsoft Yahei";
        }
        ul {
            width: 572px;
            border: 1px solid #999;
        }
        li {
            display: inline-block;
            width: 190px;
            height: 2em;
            line-height: 2em;
            text-align: center;
        }
        li:nth-of-type(2) {
            border-width: 1px;
            border-color: #cecece;
            border-style: none solid;
        }
    
        </style>
    </head>
    <body>
    <div>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>
    </body>
    </html>
    

    截图: https://imgur.com/a/gzpbp

    列表的宽度是 572px ,设定每个 Tab 的宽度为 190px ,再加上中间 Tab 的水平方向上的边框宽度共 2px ,正好为 572px , List 3 为何会被「挤」到下面一行呢?
    另外用 Edge Inspect 查看 Layout 时发现第二个 li 元素的 Offset 为 195 (应该是 191 才对,多出来的 4px 是什么?
    百思不得其解,请前端前辈解惑。

    17 条回复    2016-07-26 09:45:26 +08:00
    angelface
        1
    angelface  
       2016-07-25 23:45:29 +08:00   ❤️ 1
    让我这个不会前端的告诉你吧,宽度不够。
    LinJunzhu
        2
    LinJunzhu  
       2016-07-25 23:47:56 +08:00   ❤️ 1
    这个是 inline-block 的问题。

    在 safari 等浏览器会有 4px 的空隙。 Chrome 貌似是 8px

    解决方法:

    父级元素 ul 的 font-size: 0;

    子元素 li 的 font-size: $yourWantSize
    LinJunzhu
        3
    LinJunzhu  
       2016-07-25 23:49:33 +08:00
    唔,应该是 $TheColorYouWant :(
    fetich
        4
    fetich  
    OP
       2016-07-25 23:49:39 +08:00
    @angelface 一共三个 Tab ,每个宽 190px ,加上两条边框 2px , 3 * 190 + 2 = 572 ,为何会不够呢?
    iHirakoShinji
        5
    iHirakoShinji  
       2016-07-25 23:49:48 +08:00 via Android   ❤️ 1
    inline-block 的锅
    LinJunzhu
        6
    LinJunzhu  
       2016-07-25 23:50:05 +08:00   ❤️ 1
    唔,应该是 $TheSizeYouWant :( ... shit ,我是来搞笑的
    angelface
        7
    angelface  
       2016-07-25 23:57:57 +08:00
    @LinJunzhu 你用 developer tools 把鼠标移到 li 上就会看到了。
    fetich
        8
    fetich  
    OP
       2016-07-25 23:59:59 +08:00
    @LinJunzhu 这解决方法有点 hack 的感觉,这是 inline-block 的 bug 么?简直神迹,不过第二条语句好像没什么用……我在通配选择器中已经指定字体大小的缘故么?
    fetich
        9
    fetich  
    OP
       2016-07-26 00:00:24 +08:00
    @LinJunzhu 回血!+5s
    yhxx
        10
    yhxx  
       2016-07-26 00:00:36 +08:00   ❤️ 1
    <ul>
    <li>List 1</li><li>List 2</li><li>List 3</li>
    </ul>

    这样写应该就不换行了
    inline-block 布局 HTML 里的换行符也会算一个字符
    yhxx
        11
    yhxx  
       2016-07-26 00:02:16 +08:00   ❤️ 1
    也可以加个负的 letter-spacing ,或者用楼上的 font-size: 0 也可以
    fetich
        12
    fetich  
    OP
       2016-07-26 00:03:07 +08:00
    @angelface 能不能详细点,开发者工具前端必备,通过它获取的数据和我设定的没有任何区别;唯有 Edge Inspect 显示出了 Offset 多出了 4px ,这也是我疑问的地方。
    fetich
        13
    fetich  
    OP
       2016-07-26 00:05:56 +08:00
    @yhxx 神迹再现,好感动,+20s
    感谢楼上所有的回复我的人,谢谢大家
    momou
        14
    momou  
       2016-07-26 00:08:32 +08:00   ❤️ 1
    关键字: inline block 4px
    中英文可以找一堆答案。。。
    fetich
        15
    fetich  
    OP
       2016-07-26 00:12:37 +08:00
    @momou 就差一步,没想到用这两个关键词去搜索。心疼我的铜板一秒钟。
    hoythan
        16
    hoythan  
       2016-07-26 08:54:49 +08:00 via iPhone   ❤️ 1
    ul li 这种东西还是用 float 把,给 ul 的 after 加 clear 就可以了
    lijsh
        17
    lijsh  
       2016-07-26 09:45:26 +08:00   ❤️ 1
    inline-block 即使你设置 margin 为零左右还是有空隙的,除非把父元素字体大小设为零。

    也就 google 一下的事。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1234 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:06 · PVG 02:06 · LAX 10:06 · JFK 13:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.