非前端码农提个前端问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3220 天前的主题，其中的信息可能已经有所发展或是发生改变。

V 站第一帖，求前端大神指教
http://www.iamchao.com/one-strange-html-style-problem/

农提个

前端

指教

大神

16 条回复 • 2016-01-29 17:54:47 +08:00

bzw875

2016-01-29 11:50:24 +08:00 via iPhone

li 改成浮动就行了，因为 li 的 display 是 inline ，就好像文字间换行也会有空隙

cookie

2016-01-29 11:54:28 +08:00

你添加如下样式试下 .linearStep{font-size: 0;} ，想知道原因谷歌一下： inline-block 间隙

zhpech

2016-01-29 11:54:50 +08:00

`display:inline-block`中间如果有空白符会产生一个 space 的距离=-=貌似……

aivier

2016-01-29 11:56:48 +08:00

@bzw875 vertical-align:top

Roope

2016-01-29 12:04:13 +08:00

这样的我习惯用 float

ck1llc

2016-01-29 12:16:08 +08:00

@Roope 恩，我也习惯用 float ，当时想偷懒，就直接复制了。定位问题的时间都够自己写一个了。

libook

2016-01-29 12:18:52 +08:00

我是前端渣，细节上 Bootstrap 替我做好了。。。

ck1llc

2016-01-29 12:24:21 +08:00

@cookie 果然好使，非常感谢！

learnshare

2016-01-29 12:40:07 +08:00

https://www.google.com/#newwindow=1&q=inline-block%20%E7%A9%BA%E7%99%BD

marvinwilliam

2016-01-29 13:08:33 +08:00

换行会自动添加一个空格，一般发布之前我们会对所有资源压缩， html 会去掉所有换行

seki

2016-01-29 13:09:58 +08:00

可以试试 flex

shuiniushushu

2016-01-29 13:11:36 +08:00

元素之间的空白字符会占一个字符的位置

yuriko

2016-01-29 14:11:27 +08:00

这个坑我以前踩过，印象深刻……你 5 个 20%还容易看出来，我当时一堆 inline-block 堆砌，一不小心换行了哈哈哈哈

Phariel

2016-01-29 14:21:17 +08:00 via iPhone

元素连写中间不要换行以前被坑过。。。

NemoAlex

2016-01-29 14:32:17 +08:00

现在解决这类问题其实还有一个好办法：
用 Jade 之类的模板语言，编译出不含有多余换行和空格的 HTML 。
比 font-size: 0 或者加注释什么的都好太多了。

xumei

2016-01-29 17:54:47 +08:00

是你标签之间留有空格了；