Home Sign Up Sign In
darasion
V2EX  ›  问与答

怎样在行内用css sprite？

  •   
  •   darasion · Sep 1, 2011 · 4891 views
    This topic created in 5367 days ago, the information mentioned may be changed or developed.
    比如紧跟着文章标题后边，加一个按钮。

    如果用 display:block; 按钮就会换行了，但我不想换行；

    如果用display:inline; 按钮就会没有宽度了，但是sprite需要固定宽度;

    如果用display:inline-block; 浏览器支持有问题。

    如果用float; 那么就会无法精确定位.


    类似这种按钮或者标记,应该怎样处理比较好呢？
  • 按钮
  • display
  • sprite
    16 replies  •  1970-01-01 08:00:00 +08:00
    Platinum
        1
    Platinum  
       Sep 1, 2011
    按我的理解是标题和按钮都 float: left ？

    无法精确定位是什么意思？
    darasion
        2
    darasion  
    OP
       Sep 1, 2011
    @Platinum 就是说，我想将这个 sprite 图标 放在一行文字的任意位置. float 就会真的变成浮云超脱进了异次元了，没法插进文章里.。
    bhuztez
        3
    bhuztez  
       Sep 1, 2011
    inline-block吧
    NemoAlex
        4
    NemoAlex  
       Sep 1, 2011
    用inline
    宽度控制用padding
    mckincy
        5
    mckincy  
       Sep 1, 2011
    inline-block 就只有个间距bug很容易就KO了。或者float来弄。
    benzhe
        6
    benzhe  
       Sep 1, 2011
    @NemoAlex 正解
    darasion
        7
    darasion  
    OP
       Sep 1, 2011
    @NemoAlex 谢谢.

    @Platinum @bhuztez @mckincy



    刚刚想到了一个办法， 用<input> 不知道可以不？....
    fireyy
        8
    fireyy  
       Sep 1, 2011
    用 input 还不如用一张1个像素的透明img
    bhuztez
        9
    bhuztez  
       Sep 1, 2011
    @darasion inline-block，IE下用个Hack搞定就是了
    darasion
        10
    darasion  
    OP
       Sep 1, 2011
    @bhuztez 怎样hack？
    darasion
        11
    darasion  
    OP
       Sep 1, 2011
    @fireyy 这个想过, 不过这个透明的东东下载失败还是会变成X啊..
    Platinum
        13
    Platinum  
       Sep 1, 2011
    哎，为啥我老是会错意……上次那个什么“交错”也是……
    Sivan
        14
    Sivan  
       Sep 1, 2011
    inline-block很好解决啊，只要ie6&7写条dispplay:inline;zoom:1;就行了
    但是有边距bug，所以还是float或者inline用的多
    darasion
        15
    darasion  
    OP
       Sep 1, 2011
    @bhuztez @Sivan 多谢, 收藏此帖.
    darasion
        16
    darasion  
    OP
       Sep 5, 2011
    想到另一个办法，图标竖排, 然后用padding调整文字位置, 直接用span或a就行了.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1163 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 148ms · UTC 17:41 · PVG 01:41 · LAX 10:41 · JFK 13:41
    ♥ Do have faith in what you're doing.