CSS: Hình nền và đệm

Question

Tôi muốn thêm hình nền ở bên phải của các mục trong danh sách và muốn có một số đệm từ phía bên phải, nhưng tôi không thể làm điều đó. Hãy có một cái nhìn vào ví dụ sau đây:

HTML:

<ul> 
    <li>Hello</li> 
    <li>Hello world</li> 
</ul> 

CSS:

ul{ 
    width:100px; 
} 

ul li{ 
    border:1px solid orange; 
    background: url("arrow1.gif") no-repeat center right; 
} 

ul li:hover{ 
    background:yellow url("arrow1.gif") no-repeat center right; 
} 

tôi biết chúng tôi có thể thiết lập vị trí hình ảnh bằng pixel, nhưng vì mỗi người trong số các li có chiều rộng khác nhau , Tôi không thể làm điều đó.

Dưới đây là JSFiddle liên kết: http://jsfiddle.net/QeGAd/1/

Answer 1

Bạn có thể sử dụng các giá trị phần trăm:

background: yellow url("arrow1.gif") no-repeat 95% 50%; 

Không Pixel Perfect, nhưng ...

Answer 2

Các lựa chọn duy nhất để actuall có làm pixel này hoàn hảo là tạo ra một số lớp đệm trong suốt bản thân GIF. Bằng cách đó bạn có thể thực sự căn chỉnh nó ở bên phải của LI và vẫn có phần đệm nền bạn đang tìm kiếm.

Answer 3

thiết lập direction Thuộc tính CSS để rtl sẽ hoạt động với bạn. Tôi đoán nó không được hỗ trợ trên IE6.

e.g

<ul style="direction:rtl;"> 
<li> item </li> 
<li> item </li> 
</ul> 

Answer 4

Bạn có thể đạt được kết quả của bạn với hai phương pháp: -

Phương pháp đầu tiên xác định vị trí đánh giá cao: -

HTML

<ul> 
<li>Hello</li> 
<li>Hello world</li> 
</ul> 

CSS

ul{ 
    width:100px;  
} 

ul li{ 
    border:1px solid orange; 
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px; 
} 


ul li:hover{ 
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px; 
} 

Đầu Demo: -http://jsfiddle.net/QeGAd/18/

Second Phương pháp bởi CSS : trước: sau khi Selectors

HTML

<ul> 
<li>Hello</li> 
<li>Hello world</li> 

CSS

ul{ 
    width:100px;  
} 

ul li{ 
    border:1px solid orange; 
} 

ul li:after { 
    content: " "; 
    padding-right: 16px; 
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right; 
} 

ul li:hover { 
    background:yellow; 
} 

ul li:hover:after { 
    content: " "; 
    padding-right: 16px; 
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right; 
} 

Second Demo: -http://jsfiddle.net/QeGAd/17/

Answer 5

Bạn có thể được chính xác hơn với điều này:

background-origin: content-box; 

Điều này sẽ làm cho hình ảnh tôn trọng đệm của hộp. http://www.w3schools.com/cssref/css3_pr_background-origin.asp

Answer 6

Sử dụng background-position: calc(100% - 20px) center, để hoàn thiện pixel calc() là giải pháp tốt nhất.

ul { 
 
    width: 100px; 
 
} 
 
ul li { 
 
    border: 1px solid orange; 
 
    background: url("http://placehold.it/30x15") no-repeat calc(100% - 10px) center; 
 
} 
 
ul li:hover { 
 
    background-position: calc(100% - 20px) center; 
 
}

<ul> 
 
    <li>Hello</li> 
 
    <li>Hello world</li> 
 
</ul>

Answer 7

background-clip: nội dung hộp; Nền sẽ được vẽ bên trong hộp nội dung.