inline-block 间距问题

2014-07-21 12:58:54 +08:00
 node
假设一行inline-block元素之间间距是固定的,像这样
http://jsfiddle.net/LYUt6/
是不是只能用每个元素设margin-right、再让最后一个元素margin-right为0这种比较丑的方法?
之前还试过word-spacing,但很诡异,有有经验的能解释一下吗
3806 次点击
所在节点    程序员
11 条回复
jsonline
2014-07-21 13:01:26 +08:00
间距跟 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倒是可以解决

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

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

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

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

© 2021 V2EX