CSS 위치가 의도 한대로 작동하지 않습니다.

Question

3 개의 텍스트 입력 (2 개의 입력 텍스트, 1 개의 텍스트 영역)과 position : relative 인 div 안에 제출 버튼이 있습니다. 3 개의 텍스트 입력과 제출 버튼은 모두 상대적 위치도 있습니다. 처음 2 개의 입력 (q와 d)은 예상대로 정렬되지만, 마지막 2 개 (t와 qS)는 오른쪽으로 가고 예상 된 CSS를 따르지 않습니다. 나는 모든 텍스트 상자와 제출 버튼을 왼쪽 아래에서 같은 거리만큼 줄 이도록하고 싶습니다.

마크 업 :

<form method='POST' action='ask.php'> 
     <input type='text' id='q' > 
     <textarea id='d'></textarea> 
     <input type='text' id='t'> 
     <input type='submit' value='submit' id='qS'> 
    </form> 

CSS :

#q{ 
position: relative; 
top: 30px; 
left: 20px; 
width: 400px; 
border: 1px solid orange; 
font-size: 13px; 
} 

#d{ 
position: relative; 
top: 60px; 
left: 20px; 
height: 100px; 
width: 400px; 
} 

#qS{ 
position: relative; 
    top: 20px; 
left: 20px; 
} 

#t{ 
position: relative; 
top: 20px; 
left: 100px; 
} 

Answer 1

귀하의 CSS를 매우 지저분하다. 더 스타일과 간격 CSS를 사용을 위해 ... 당신은 모든 CSS를 삭제하고이와 HTML을 대체 원하는

<form method='POST' action='ask.php'> 
     <p><input type='text' id='q' ></p> 
     <p><textarea id='d'></textarea></p> 
     <p><input type='text' id='t'></p> 
     <p><input type='submit' value='submit' id='qS'></p> 
    </form>  

를 얻으려면. 위치를 정할 필요가 없습니다. 상대적입니다 ... 또한 왼쪽, 오른쪽, 위도 사용할 필요가 없습니다. 필요한 곳에 여백을 사용하십시오. 모든 것을 함께 이동하려면 양식 요소에 여백을 설정하십시오.

Answer 2

기본적으로 모든 요소는 상대적으로 배치되므로 모든 요소에 대해 요소를 지정할 필요가 없습니다. 여백을 추가하려면 div에 패딩을 추가하면 작업이 수행됩니다. 다음은 코드 예제입니다. http://jsfiddle.net/cdRzW/

업데이트 : 기본 위치 대하여 고정되지 않고, 그러나, 요소 자동 HTML 흐름 및 상대 위치가 필요하지 않은 경우에는이 위치한다.