2つの要素を隣り合わせに置いて、両方に余白が残っています

Question

私が書く時にこの問題がたくさんあるようです。同じ行に2つの要素があります。私はマージンを持つためにそれらを両方必要とし、したがって、彼らの位置をabsoluteに設定することはできません。私は最初の要素の位置を設定しない場合、それは正常に表示されます。ただし、2番目の要素は最初の要素の下に表示されます。これは悪いです;私は彼らが同じ行に出て欲しいです。言い換えれば、私は両方の要素を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; 
}