如何在同一行中创建元素[CSS]

Question

我想将方框1放在与方框2相同的行中。在下面的代码框中，2位于方框1下方。我想知道如何解决该问题。

#container {
background-color: #999;
margin: 0px auto;
width: 1000px;
height: 620px;
z-index: 1;
}
#box1 {
background-color: #0F3;
width: 530px;
height: 75px;
display:inline-block;
z-index: 1;
margin-top: 0px;    
margin-left: 0px;
}
#box2 {
display:inline-block;
background-color: #00F;
width: 470px;
height: 75px;
z-index: 1;
margin-top: 0px;
margin-left: 530px;
}
<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>

Answer 1

只需使用展示inline-block： LIVE DEMO

也无需为{{1}设置margin-left }。您可以将其删除。

如果内联元素之间存在间隙问题，您可以查看此文章：
How to remove the space between inline-block elements?

Answer 2

您的代码是正确的，但除此之外：

#box2 {
    ...
    margin-left: 530px;
}

它从box1的右侧计算边际值。但你认为它是从窗口或容器div计算的。

改变它;

#box2 {
    ...
    margin-left: 0;
}