将边距从像素转换为百分比 - 中断浮动左元素

Question

我有以下HTML块：

  <div class="container clearfix">
  <div class="grid_8 omega">
     <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
    </ul>
 </div>

以这种方式设计：

ul.nav {
  margin-top: 18.18%;
  list-style: none;
  float: right;
}

ul.nav li {
  float: left;
  margin-right: 40px;
}

这给了我以下结果（Web开发人员工具栏概述）：

现在我正在尝试将40px的边距更改为百分比，以使网站更流畅，并且从我已经了解到我应该使用target / context =结果，在这种情况下是40px / 660px = 0.06，大约是6 ％。然后我将40px更改为6％，我得到以下内容：

我在这里做错了什么？当我调整浏览器窗口大小时，ul块的宽度已缩小，并且margin-right没有改变。似乎无论我投入多少百分比都没有百分比的价值使得这项工作完全没有用。我必须使用百分比错误？为什么它不起作用？

Answer 1

好的，我想通过@AliBassam的评论

正如他所说，margin-right的百分比与父元素ul而不是div相关。 ul块的宽度与li元素的余量有关，但如果该边距是ul元素的百分比，则两个元素相互依赖，并且它没有意义。

要解决此问题，您需要将宽度设置为ul.nav：

ul.nav {
  width: 83%;
  margin-top: 18.18%;
  list-style: none;
  float: right;
}

这是div中包含ul.nav的600px的83％，转换为大约500px

Answer 2

我不知道身高是多少......所以它不知道18.8％是什么。您必须先声明html和body 100％高度。和所有的事情......这很棘手。就像@Mr_Green说...它是基于宽度因为它是疯了！还... 18.8 os是一个重要的数字。 （与ul相同...... 6.3498％的......？）