inline-block 间距问题

V2EX = way to explore

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

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

假设一行inline-block元素之间间距是固定的，像这样
http://jsfiddle.net/LYUt6/
是不是只能用每个元素设margin-right、再让最后一个元素margin-right为0这种比较丑的方法？
之前还试过word-spacing，但很诡异，有有经验的能解释一下吗

11 条回复 • 2014-07-21 21:11:44 +08:00

jsonline

2014-07-21 13:01:26 +08:00 via Android

间距跟 font size 有关，设置为0见没间距了。

zythum

2014-07-21 13:04:29 +08:00

最好的方法就是写html的时候中间不要带空格，回车，换行什么的就行了。

jarlyyn

2014-07-21 13:23:43 +08:00

这个不是应该每个元素加两边margin/padding.
然后外框元素设负数左右margin么……

sneezry

2014-07-21 14:53:56 +08:00

我的想法和楼主差不多，只是经常用:last-child伪类

jakwings

2014-07-21 14:54:57 +08:00

还可以用 .wrapper > div:last-child
不用正规方法怎么写都是丑。

node

2014-07-21 15:08:46 +08:00

多谢大家给意见，这下有点感觉了

@jsonline 明白了，设了font-size: 0 之后就好了 :)

@jarlyyn 外框设负数margin真的可以奏效吗？试了一下好像没有成功

foomorrow

2014-07-21 15:46:27 +08:00

letter-spacing:-.31em;

來自purecss的解決方案

ttph1oc

2014-07-21 15:50:01 +08:00

所有用CSS的方法都属于hack，最好是用个模板引擎，后端自动删输出的换行和空格。

Mutoo

2014-07-21 15:52:57 +08:00

刚好看到这篇文章 inline-block 的前世今生 http://ued.taobao.com/blog/2012/08/inline-block/

hidoos

2014-07-21 16:59:03 +08:00

父元素设置font-size为0，不过一定要记得为子元素添加font-size，不然文字就看不见；
另外，一丝写的inline-block的前世今生那篇真的不错可以看看。inline-block这个间距是正常的，不是bug。

Biwood

2014-07-21 21:11:44 +08:00

如果是因为文本空格导致的间隔，用margin-right根本没作用好吧，父元素font-size为0倒是可以解决