실제 테두리가있는 div에 물건을 넣는 방법

Question

div가 있지만 CSS 위치 속성을 설정하는 방법을 모른다. div (nav)를 페이지 중간에 배치하고 싶습니다. 그런 다음 경계에 내용이 오도록 div에 내용을 배치하고 싶습니다. 현재 div 경계선은 아무 것도 경계를 지정하지 않으며 국경이어야하는 내용은 div 아래에 나타납니다.

HTML :

이

  <div id='nav'> 
<a id='ask' class='button' unselectable='on' style='left: 20px;' href='#'>one</a> 
<a id='unanswered' class='button' unselectable='on' style='left: 120px;' href='#'>two</a> 
<a id='unanswered' class='button' unselectable='on' style='left: 220px;' href='#'>three</a> 
<a id='unanswered' class='button' unselectable='on' style='left: 320px;' href='#'>four</a> 

CSS : .button 이후

.button{ 
position: absolute; 
top: 50px; 
border: 1px solid orange; 
cursor: pointer; 
padding: 0px 10px 0px 10px; 
} 

#nav{ 
position: relative; 
margin-right: auto; 
margin-left: auto; 
margin-bottom: 10px; 
border: 1px solid gray; 
width: 700px; 
} 

Answer 1

는, 컨테이너 사업부 (.nav)가 자신에 자신의 높이를 계산하지 않는 position:absolute로 설정됩니다.

는 링크 후 삭제 div을 추가

<div style="clear:both;"></div> 

이 트릭을 할해야합니다.

또한, 당신은 정말 당신의 a 요소 position:absolute —로 설정 한 필요가 없습니다 여기 내 솔루션입니다 :

.button { 
    display:inline-block; 
    margin-top: 50px; 
    margin-right:80px; 
    border: 1px solid orange; 
    cursor: pointer; 
    padding: 0px 10px; 
} 

#nav { 
    position: relative; 
    margin: 0 auto; 
    border: 1px solid gray; 
} 

Example.

Answer 2

Purmou의 용액에 대한 대안은 특히 CSS에서 #nav의 DIV 높이를 설정하는 것이다

#nav 
{ 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 10px; 
    border: 1px solid gray; 
    width: 700px; 
    height: 120px; 
} 

등이 fiddle에 도시.