CSS span标签

Question

我从去）到B）：http://i.imgur.com/xxgV0.png （绿色股票图像是从精灵）

我有以下的HTML代码：

<p class="stock"><span class="img"></span>in stock</p> 

而且下面的CSS代码：

p span.img { 
     display:inline-block; 
     width: 14px; 
     height: 17px; 
     padding-right: 5px; 
     background: transparent url(images/page1/tho_main_sprite.png) -0px -580px; 
    } 

    p.stock { 
     font-size: 9px; 
     color: #000; 
    } 

我tryed给予一定的高度和线路heigt到p.stock，但没有结果......

非常感谢！

Answer 1

也许vertical-align可以帮助

p span.img { 
       display:inline-block; 
       width: 14px; 
       height: 17px; 
       padding-right: 5px; 
       background: transparent url(images/page1/tho_main_sprite.png) -0px -580px; 

     vertical-align: bottom; 
   } 

Answer 2

排序做的黑客方法，但它实现了你在找什么。 首先将文本“库存”放在一个范围内。

<p class="stock"><span class="img"></span><span class="line">in stock</span></p> 

使两个跨越块和向左浮动。另外补充的line-height

p span.img { 
    display: block; 
    float: left; 
    width: 14px; 
    height: 17px; 
    padding-right: 5px; 
    background: transparent url(images/page1/tho_main_sprite.png) -0px -580px; 
} 

p.stock span.line { 
    display: block; 
    float: left; 
    height: 17px; 
    line-height: 17px; 
    font-size: 9px; 
    color: #000; 
} 

Answer 3

所以我的一些保证金和宽度值将是不正确的，不知道的代码的其余部分，但你可以很容易地解决。

让我们两个范围的段落：

p span.img { 
     display:inline-block; 
     width: 14px; 
     height: 17px; 
     background: transparent url(images/page1/tho_main_sprite.png) -0px -580px; 
     float: left; 
    } 

p span.txt {float: left; margin: 10px 0 0 5px;} 

    p.stock { 
     font-size: 9px; 
     color: #000; 
     clear: both; 
     width: 150px; 
    } 

<p class="stock"><span class="img"></span><span class="txt">in stock</span></p> 

PS：保证金的解释，它有一个接受四个参数。方向顺时针方向

余量：从顶部从左到右从底部从右到左