두 요소를 나란히 놓고 둘 다 여전히 여백이 있습니다.

Question

필자는이 문제가 많은 것 같습니다. 같은 줄에 두 개의 요소가 있습니다. 둘 다 마진이 필요하므로 위치를 absolute으로 설정할 수 없습니다. 첫 번째 요소의 위치를 ​​설정하지 않으면 잘 나타납니다. 그러나 두 번째 요소는 첫 번째 요소 아래에 나타납니다. 이것은 나쁘다; 나는 그들이 같은 선에 나타나기를 바란다. 즉, 두 요소를 모두 position: absolute; top: 0;으로 설정하고 싶습니다. 그런 다음 필요한 여백을 사용할 수 없습니다.

HTML :

이

#userQuestion{ 
//border: 1px solid yellow; 
width: 400px; 
position: relative; 
top: 0px; 
left: 40px; 
line-height: 1.28; 
display: inline-block; 
} 

.container{ 
padding: 0; 
margin 0; 
border-top: 1px solid #ccc; 
//border: 1px solid blue; 
margin-top: 30px; 
width: 480px; 
} 

HTML :

<div id='userQuestion'></div> //this is fine 
<div class='container'></div> //this appears underneath userQuestion. I would like them to be on the same line. 

Answer 1

는 다음과 같은 시도 :

.container { 
    border-top: 1px solid #CCCCCC; 
    display: inline-block; 
    margin-top: 30px; 
    padding: 0; 
    width: 480px; 
}