CSS: три ссылки фонового изображения: поплавок один крайний левый, один крайний правый и один центр?

Question

Я хочу использовать CSS, чтобы создать навигационную схему, для серии статей, каждая из которых является глава серии мультфильма:

<div with 500px width>------------------------- 
----------------------------------------------- 
----------------------------------------------- 
<div> 
<<previous   +more    >>next 
</div> 
</div> 

«предыдущий», «рядом» и «больше» все пустые div (но могут быть интервалы) с шириной 50 пикселей и фоном. Они ссылаются на соответствующие места.

Я использую CSS спрайты для создания приятных эффектов наведения, что также означает, что я не могу легко изменить ширину каждой ссылки, не испортив спрайты.

Для жизни я не могу понять, как стилизовать три div, чтобы получить «предыдущий», чтобы плавать в крайнем левом углу, «больше», чтобы плавать в центре, и «далее», чтобы плавать вправо.

Может ли кто-нибудь помочь?

Спасибо.

---

Answer 1

Вы можете просто определить запас, так как я предполагаю, что контейнер DIV всегда будет 500?

Так что-то вроде

<div style="width: 500px"> 
<div style="float: left;">Previous</div> 
<div style="float: left; margin-left: how ever many pixels it takes to center;">more</div> 
<div style="float: right;">Next</div> 
</div> 

Answer 2

.previous { 
    width: 50px; 
    float: left; 
    background-position: left; 
} 
.more { 
    width: 400px; 
    float: left; 
    background-position: center; 
} 
.next { 
    width: 50px; 
    float: left; 
    background-position: right; 
}