水平菜单使用％定位

Question

我正在创建一个包含with:100%;和height:45px;

的div的菜单

菜单中的每个元素都是div。我的目标是让它适应任何屏幕分辨率，所以我首先将第一个div放在margin-left:2%;上，但对于下一个div，我不确定我必须使用什么。

我可以在float:left;中创建第一个元素并使用margin-left:10%;之类的边距，但如果我们更改屏幕分辨率，那就不再好了。如果我没有把任何东西放在第一个按钮下面。如果我在px中使用margin-left它会因为第一个margin-left:2%;而不是很好，我怎样才能实现这个目标？

这就是我所拥有的（你可以看到按钮位于第一个按钮之下）：

Answer 1

为什么不使用display：inline-block;什么是对你有用的利润？ 这意味着，第一个元素可以有2％，第二个元素也可以：

<div id="menu">
<div class="element">1</div>
<div class="element">2</div>
</div>

#menu{
    width:100%;
    height:45px;    
    background:#f00;
}
.element{
    background:#0f0;
    display:inline-block;
    margin-left:2%;
}

我认为在提出这类问题时你应该提供类似jsfiddle的内容：）