V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
node
V2EX  ›  程序员

inline-block 间距问题

  •  
  •   node · 2014-07-21 12:58:54 +08:00 · 3756 次点击
    这是一个创建于 3762 天前的主题,其中的信息可能已经有所发展或是发生改变。
    假设一行inline-block元素之间间距是固定的,像这样
    http://jsfiddle.net/LYUt6/
    是不是只能用每个元素设margin-right、再让最后一个元素margin-right为0这种比较丑的方法?
    之前还试过word-spacing,但很诡异,有有经验的能解释一下吗
    11 条回复    2014-07-21 21:11:44 +08:00
    jsonline
        1
    jsonline  
       2014-07-21 13:01:26 +08:00 via Android   ❤️ 1
    间距跟 font size 有关,设置为0见没间距了。
    zythum
        2
    zythum  
       2014-07-21 13:04:29 +08:00
    最好的方法就是写html的时候中间不要带空格,回车,换行什么的就行了。
    jarlyyn
        3
    jarlyyn  
       2014-07-21 13:23:43 +08:00
    这个不是应该每个元素加两边margin/padding.
    然后外框元素设负数左右margin么……
    sneezry
        4
    sneezry  
       2014-07-21 14:53:56 +08:00
    我的想法和楼主差不多,只是经常用:last-child伪类
    jakwings
        5
    jakwings  
       2014-07-21 14:54:57 +08:00
    还可以用 .wrapper > div:last-child
    不用正规方法怎么写都是丑。
    node
        6
    node  
    OP
       2014-07-21 15:08:46 +08:00
    多谢大家给意见,这下有点感觉了

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

    @jarlyyn 外框设负数margin真的可以奏效吗?试了一下好像没有成功
    foomorrow
        7
    foomorrow  
       2014-07-21 15:46:27 +08:00
    letter-spacing:-.31em;

    來自purecss的解決方案
    ttph1oc
        8
    ttph1oc  
       2014-07-21 15:50:01 +08:00
    所有用CSS的方法都属于hack,最好是用个模板引擎,后端自动删输出的换行和空格。
    Mutoo
        9
    Mutoo  
       2014-07-21 15:52:57 +08:00
    刚好看到这篇文章 inline-block 的前世今生 http://ued.taobao.com/blog/2012/08/inline-block/
    hidoos
        10
    hidoos  
       2014-07-21 16:59:03 +08:00
    父元素设置font-size为0,不过一定要记得为子元素添加font-size,不然文字就看不见;
    另外,一丝写的inline-block的前世今生那篇真的不错可以看看。inline-block这个间距是正常的,不是bug。
    Biwood
        11
    Biwood  
       2014-07-21 21:11:44 +08:00
    如果是因为文本空格导致的间隔,用margin-right根本没作用好吧,父元素font-size为0倒是可以解决
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2307 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 16:11 · PVG 00:11 · LAX 08:11 · JFK 11:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.