html - 将边距从像素转换为百分比 - 打破左浮动元素

Question

我有以下 HTML block :

  <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 = result，在这种情况下是 40px/660px = 0.06，大约是 6 %。然后我将 40px 更改为 6%，我得到以下结果:

我做错了什么？当我调整浏览器窗口大小时，ul block 的宽度已缩小并且 margin-right 没有改变。似乎无论我输入多少百分比，都没有任何百分比值可以使这项工作发挥作用。我一定是用错了百分比？为什么它不起作用？

Answer 1

好的，感谢@AliBassam 的评论，我明白了

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

要解决这个问题，您需要为 ul.nav 设置宽度:

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

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