여백 오른쪽 작동하지 않습니다

Question

좀 도와주세요이 고침 좀 도와주세요 http://jsfiddle.net/q4rdL/2/ 나는 왼쪽에있는 다른 다음과 이전 버튼이있는 메뉴를하고 있는데, 나는 너비 100 % 높이 100 % 이전 및 다음 div의 사이에 여백 왼쪽 여백이 바로 여기에 모든

에서 작동하지 않습니다 잘 작동 코드입니다 :

<div id="menu" style ="width : 100% ; height:50px ; border : 2px solid red ; position : absolute ; top:0 ; display : none" > 
      <div id="pre" style ="height:100% ; width: 50px ; border :1px solid green ; float :left ; left:0 "><</div> 
      <div id="menuContent" style="width:100% ; height:100% ; border : 5px solid green ; position:absolute; margin-left :60px ;" > </div> 
      <div id="next" style ="height:100% ; width: 50px ; border :1px solid green ; float :right ; right:0 ; position:absolute ">></div> 
      </div> 
      <div id="show_hide" style ="width : 100% ; height:70px ; position : absolute ; top:0" ></div> 

질문 여백 잘 작동하는지 확인하는 방법이며 않는 이유 이 ?

Answer 1

이이 http://jsfiddle.net/q4rdL/32/

내가 어떤 DIV에 폭 100 % 변경 "위치"를 제거 시도를, 용액은 기지개 할 수있다 어떤 해상도 로든지

Answer 2

지금까지 내가 당신이 위치 제거해야 볼 수 있습니다 : 나는 몇 가지를 당신의 HTML을 정리하고 비 인라인 CSS로 이동하려 = "다음"id를 가진 요소

Answer 3

에 대한 절대.

HTML :

<div id="menu"> 
    <div id="pre"><</div> 
    <div id="menuContent"></div> 
    <div id="next">></div> 
</div> 
<div id="show_hide"></div>​ 

CSS : 당신이 menuContent과 다이빙의 오른쪽 여백을 넣어 의미하는 경우

#menu { 
    width: 100%; 
    height: 50px; 
    border: 2px solid red; 
} 

#pre { 
    height: 100%; 
    width: 3%; 
    border: 1px solid green; 
    float: left; 
    padding-left:7px; 
} 

#menuContent { 
    float:left; 
    width: 90%; 
    height: 100%; 
    border: 5px solid green; 
} 

#next { 
    height: 100%; 
    width: 3%; 
    border: 1px solid green; 
    float: right; 
    padding-left:7px; 
} 

#show_hide { 
    width: 100%; 
    height: 70px; 
    position: absolute; 
    top:0; 
}​ 

Live DEMO

Answer 4

, 당신의 width을 변경해야 그것은 낮추고, 100 %는 y의 폭을 의미한다. 우리의보기와 여백이 추가되어 브라우저에 수평 스크롤이 생깁니다. 추가에서

<div style="height: 100%; border: 5px solid green; position: absolute; width: 90%; margin: 0pt 58px;" id="menuContent"> </div>

난 정말 당신이 뭘 하려는지 몰라,하지만 난 당신이 생각하고 당신을 위해 도움이 내 대답을 얻었다 희망 :

이 시도.

편집 : 오 나는이 링크를 참조 상대적인 위치에 menu 변경 : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 5

나는 플로트를 사용하지 않는 자기 자신의 버전을 시도했다. 그것은 모두 절대적인 것으로 배치됩니다. 보유하고있는 경계로 인해 항상 2 픽셀 씩 떨어져 있기 때문에 메뉴 div에서 width: 100%을 삭제했습니다. div가 너비를 변경하는 대신에 나는 단지 position: absolute; left: 50%; margin-left: -<half the size of #menuContent>을 사용하여 중심에 두었습니다. 따라서 #menuContent가 500px이면 margin-left: -250;입니다. 당신의 생각을 알려주세요 : JS Fiddle

Answer 6

제 생각에 구조를 바꾸면 훨씬 좋습니다. 이 Fiddle을 확인하십시오.

HTML :

<div id="menu"> 
    <table width="100%" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td id="pre">    
       < 
      </td> 
      <td id="menuContent">    

      </td> 
      <td id="next">    
       > 
      </td> 
     </tr> 
    </table> 
</div> 

CSS : 여백 오른쪽이 있어야하는데

#menu { 
    width : 100% ; 
    height:50px ; 
    border : 1px solid red ; 
    top:0 ; 
} 

#pre, #next { 
    width: 50px; 
} 

#menu td { 
    border : 1px solid red ; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center; 
}