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

Question

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

的 div

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

我可以在 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 源的东西:)