这是一个创建于 2835 天前的主题，其中的信息可能已经有所发展或是发生改变。
示例很简单，直接贴上了：
<!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>
列表的宽度是 572px ，设定每个 Tab 的宽度为 190px ，再加上中间 Tab 的水平方向上的边框宽度共 2px ，正好为 572px ， List 3 为何会被「挤」到下面一行呢？
另外用 Edge Inspect 查看 Layout 时发现第二个 li 元素的 Offset 为 195 （应该是 191 才对，多出来的 4px 是什么？
百思不得其解，请前端前辈解惑。
 |
1
angelface 2016-07-25 23:45:29 +08:00  1
让我这个不会前端的告诉你吧，宽度不够。
|
 |
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 |
|
3
LinJunzhu 2016-07-25 23:49:33 +08:00
唔，应该是 $TheColorYouWant :(
|
 |
4
fetich OP @angelface 一共三个 Tab ，每个宽 190px ，加上两条边框 2px ， 3 * 190 + 2 = 572 ，为何会不够呢？
|
 |
5
iHirakoShinji 2016-07-25 23:49:48 +08:00 via Android 1
inline-block 的锅
|
|
6
LinJunzhu 2016-07-25 23:50:05 +08:00 1
唔，应该是 $TheSizeYouWant :( ... shit ，我是来搞笑的
|
|
8
fetich OP @LinJunzhu 这解决方法有点 hack 的感觉，这是 inline-block 的 bug 么？简直神迹，不过第二条语句好像没什么用……我在通配选择器中已经指定字体大小的缘故么？
|
 |
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 里的换行符也会算一个字符 |
|
11
yhxx 2016-07-26 00:02:16 +08:00 1
也可以加个负的 letter-spacing ，或者用楼上的 font-size: 0 也可以
|
|
12
fetich OP @angelface 能不能详细点，开发者工具前端必备，通过它获取的数据和我设定的没有任何区别；唯有 Edge Inspect 显示出了 Offset 多出了 4px ，这也是我疑问的地方。
|
 |
14
momou 2016-07-26 00:08:32 +08:00 1
关键字： inline block 4px
中英文可以找一堆答案。。。 |
 |
16
hoythan 2016-07-26 08:54:49 +08:00 via iPhone 1
ul li 这种东西还是用 float 把，给 ul 的 after 加 clear 就可以了
|
 |
17
lijsh 2016-07-26 09:45:26 +08:00 1
inline-block 即使你设置 margin 为零左右还是有空隙的，除非把父元素字体大小设为零。
也就 google 一下的事。 |
Select Language