CSS : 세 가지 배경 이미지 링크 : 한 극단적 인 왼쪽, 한 극단적 인 오른쪽 및 한 센터 부동?

Question

나는 만화 시리즈의 한 장인 일련의 블로그 게시물에 대한 탐색 레이아웃을 만들기 위해 CSS를 사용하려고합니다.

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

'이전', '다음'및 '그 이상'은 다음과 같습니다. 너비가 50px이고 배경 이미지가 적용된 모든 빈 div (그러나 스팬 일 수 있음). 그들은 관련 장소로 연결됩니다.

멋진 호버 효과를 만들기 위해 CSS 스프라이트를 사용하고 있습니다. 스프라이트를 엉망으로 만들지 않고도 각 링크의 너비를 쉽게 변경할 수 없습니다.

저의 삶에 대해 저는 극단적 인 왼쪽에 '이전', 가운데에 떠있는 '더', 오른쪽으로 떠오르는 '다음'을 얻기 위해 세 div의 스타일을 지정하는 방법을 알아낼 수 없습니다.

누구든지 도와 줄 수 있습니까?

고마워.

---

Answer 1

는 그냥 여백을 정의 할 수 있습니까?

그래서 페이지의 해당 부분의 HTML 구조 무엇

<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; 
}