示例很简单,直接贴上了:
<!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 一下的事。 |