Question

I have to go from a) to b) : https://i.stack.imgur.com/9hWxJ.png (the green stock-image is from a sprite)

I m having following HTML-code:

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

遵循特别安全局编码:

   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;
   }

我试图将一些高和直线带给牲畜,但没有结果。

感谢很多!

Answer 1

Maybe 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

Sort of a hacked method of doing it but it achieves what you are looking for. First put the text "in stock" in a span.

<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: Margin explanation, it has four parameters that accepts. Direction goes clockwise

差值:从右边从肉体中分离出来

友情链接