6

テキストの各行の左側に背景画像が設定されたリストが設定されましたが、それらは整列していないように見えますが、テキストの周りにスパンを配置してテキストを再配置しようとしましたが、うまくいかなかったようです

使用しているコードはこちらです..

HTML

<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>

CSS

 .price-features{
margin-top:30px;
 }

 .price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
 }

 .price-features li span{
  padding-top:5px;
 }

http://i.stack.imgur.com/rV1LM.png

4

1 に答える 1

8

パディングは、ブロック レベルの要素にのみ影響します。yourspanをブロック レベル要素に変更するか、デフォルトdisplayをblockorにオーバーライドする必要がありますinline-block。

.price-features li span{
  display: block;
  padding-top:5px;
}
于 2012-07-06T23:00:51.840 に答える