Question

我必须从a）到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;
   }

我试图给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>

使两个跨度阻挡并向左浮动。还要添加行高

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：保证金说明，它有四个接受的参数。方向顺时针方向

保证金：从左上方从右下方从右上方

段落中的CSS span标记

3 个答案: