css - 百分比填充不适用于 float 列表项

Question

我创建了一个标准菜单 - html 如下所示:

                  <div>
                        <ul id="main-nav" class="clearfix">
                            <li><a id="Content_HyperLinkNav1">Compare</a></li>
                            <li><a id="Content_HyperLinkNav2" class="best-buy">Best Buys</a></li>
                            <li><a id="Content_HyperLinkNav3">Filter</a></li>
                        </ul>
                    </div>

菜单从左到右呈现，因此 LI 设置为 float ，并将clearfix 应用于父 UL。

我可以向链接元素添加固定填充，但我想让它取决于 LI(包含 A)的整体宽度。

在许多变体中，我在 A 元素上尝试了以下操作:

padding:0 5%;

但这并不适用父宽度的 5% - 有什么想法吗？

这是我正在尝试使用的CSS:

 #main-nav
 {
     float:left;
     height:4.6rem;
     width:100%;
 }

 #main-nav li
 {
    float:left;
 }

 #main-nav li a
 {
    display:block;
    line-height:4.6rem;
    padding:0 2rem; /* this needs to be a percentage */
 }

Answer 1

上/下/右/左的百分比值 padding相对于包含 block 的宽度。

当你说5%时，你应该问自己5%什么？作为 <a> 的包含 block 元素 - 在本例中为列表项 - 没有明确的 width , 5%的auto将是auto这没有任何意义。

这并不理想，但在这个特定的例子中 <li>元素有width的auto ，假设#main-nav与屏幕(视口(viewport))一样宽，您可以使用 viewport percentage unit vw 指定下降 <a> 的填充s 相对于视口(viewport)的宽度。

<强> Example Here

#main-nav li a {
  display: inline-block;
  padding: 0 5vw; /* 1vw equals to  1/100 of the width of the viewport */
}

---

否则，您可能需要将填充应用于 <li>元素代替。

<强> Updated Example

#main-nav li {
  float:left;
  padding: 0 5%;
}