định vị một khoảng trong một li

Question

ive có danh sách được thiết lập với hình nền được đặt ở bên trái của mỗi dòng văn bản mặc dù chúng dường như không xếp hàng, tôi đặt một khoảng xung quanh văn bản để thử và đặt lại vị trí văn bản nhưng nó didnt dường như làm việc

heres mã im sử dụng ..

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

Answer 1

Đệm chỉ ảnh hưởng đến yếu tố cấp khối. Bạn cần phải thay đổi span thành phần tử cấp khối hoặc ghi đè mặc định display thành block hoặc inline-block.

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