css - 使用 % 定位的水平菜单

Question

我正在制作一个带有with:100%;和的 div 菜单height:45px;

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

我可以制作第一个元素float:left;并使用边距，margin-left:10%;但是如果我们更改屏幕分辨率，它就不再好用了。如果我不放任何东西，它会在第一个按钮下。如果我使用margin-leftin px 它不会很好，因为第一个margin-left:2%;我怎样才能做到这一点？

这就是我目前拥有的（您可以看到按钮位于第一个下方）：

Answer 1

你为什么不使用 display:inline-block; 以及对您来说有利的利润是多少？这意味着，第一个元素可以有 2%，第二个元素也可以：

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

​</p>

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

​</p>

我认为你应该在问这些类型的问题时提供类似 jsfiddle 源的东西:)