2

我必须从 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 一些高度和行高，但没有结果......

非常感谢！

4

3 回答 3

5

也许垂直对齐可以帮助

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;
   }
于 2012-05-07T14:06:27.817 回答
0

一种被黑的方法，但它实现了你正在寻找的东西。首先将文本“in stock”放在一个跨度中。

<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;
}
于 2012-05-07T14:19:14.940 回答
0

所以我的一些边距和宽度值会不正确，不知道其余的代码，但您可以轻松修复。

让我们在段落中创建两个跨度：

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：保证金解释，它有四个参数可以接受。方向顺时针

边距：从上到下 从左到下 从右到下

于 2012-05-07T14:21:58.137 回答