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%;
}