1

我有以下 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 开发人员工具栏概述）：

截图1

现在我正在尝试将 40px 边距更改为百分比，以使网站更加流畅，据我所知，我应该使用 target / context = result，在这种情况下为 40px / 660px = 0.06，大约为 6%。然后我将 40px 更改为 6%，然后得到以下内容：

截图2

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

4

2 回答 2

3

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

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

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

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

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

于 2013-06-02T05:03:36.740 回答
0

我不知道高度是多少……所以它不知道 18.8% 是多少。你必须先声明 html 和 body 100% 的高度。和里面的所有东西......这很棘手。就像@Mr_Green 说的……它基于宽度，因为它太疯狂了！！！还... 18.8 os 一个重击号码。（与 ul 相同... 6.3498% of what...？）

于 2013-06-02T04:49:51.963 回答