가로 div 레이아웃의 여백 - 오른쪽

Question

내 웹 사이트의 가로 스크롤 레이아웃을 만들려고합니다. 내 코드는 지금 전체 내용에 여백 오른쪽을 추가하려고이

<div id="outerWrapper"> 
    <div id="innerWrapper" style="position: relative;"> 
     <div style="width: 200px; position: absolute; top: 0px; left: 0px;"> 
      some lengthy content! 
     </div> 
     <div style="width: 200px; position: absolute; top: 0px; left: 220px;"> 
      some lengthy content! 
     </div> 
     <div style="width: 200px; position: absolute; top: 0px; left: 440px;"> 
      some lengthy content! 
     </div> 

     ... 

     <div style="width: 200px; position: absolute; top: 0; left: 1100px;"> 
      some lengthy content! 
     </div> 
    </div> 
</div> 

과 같은 형태, 그래서 innerWrapper 및/또는 outerWrapper 모두 마진 오른쪽을 추가했지만, 그것은 무시됩니다. margin-left가 작동 중입니다. 실제로 이러한 문제를 피하기 위해 float: left 대신 position: absolute 접근 방식을 사용했지만 작동하지 않는 것 같습니다. 왜 내가 마진 권리를 가질 수 없습니까? 명시 적으로 내부 또는 외부 래퍼의 너비를 설정하더라도 여전히 작동하지 않습니다.

흥미롭게도 본문의 너비가 올바르지 않습니다. 본문의 너비는 래퍼의 너비가 아니라 브라우저 창의 너비입니다.

내용 (innerWrapper 및 아래의 모든 내용)은 JS를 통해 동적으로 만들어집니다 (중요한 경우).

Answer 1

이 같은 부정적인margin-left 대신 margin-right를 사용할 수 있습니다

#innerWrapper{ 
    margin-left:-5px; 
} 

Answer 2

이 시도. 아마도 당신의 상태에 도움이됩니다. 당신이 수 평을 원하는 경우에

.class 
{ 
margin-right:10px !important; 
} 

Answer 3

. 레이아웃, 높이를 설정하여 시작 outerWrapper.

그런 다음 "페이지"를 사용하여 목록 요소의 콘텐츠를 설정 : 네비게이션 시스템에 대한 지금

<div id="outerWrapper"> 
    <ul id="maincontent"> 
     <li ><a name="p1">Box 1</a></li> 
     <li ><a name="p2">Box 2</a></li> 
     <li ><a name="p3">Box 3</a></li> 
     <li ><a name="p4">Box 4</a></li> 
     <li ><a name="p5">Box n</a></li> 
    </ul> 
</div> 

, 그럴 수 :

<div id="scroll-buttons"> 
    <a href="#p1">Go to the section 1</a> | 
    <a href="#p2">Go to the section 2</a> | 
    <a href="#p3">Go to the section 3</a> | 
    <a href="#p4">Go to the section 4</a> 
</div> 

CSS : 약

#container{ 
    width:3000px; 
    height:400px; 
} 

#maincontent{ 
    border:0; 
    margin:0; 
    padding:0; 
} 

#maincontent li{ 
    line-style:none; 
    width:240px; 
    height:380px; 
    padding:10px; 
    float:left; 
} 

#scroll-buttons{position:fixed;} 

당신의 "왜"질문 : absolutely positioned elements exit the DOM structure tree에 유의하십시오. (BTW, float:도 마찬가지입니다.)