将两个元素并排放置，并且两个元素仍然有边距

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;
}