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

2016-07-25 23:34:57 +08:00
 fetich

示例很简单，直接贴上了：

<!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 是什么？
百思不得其解，请前端前辈解惑。

2379 次点击
所在节点    问与答
17 条回复
angelface
2016-07-25 23:45:29 +08:00
让我这个不会前端的告诉你吧，宽度不够。
LinJunzhu
2016-07-25 23:47:56 +08:00
这个是 inline-block 的问题。

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

解决方法：

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

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

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

也就 google 一下的事。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/294903

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX