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的百分比值是相对于包含块的宽度。

当你说5%时，你应该问自己5%什么？由于<a>元素的包含块（本例中的列表项）没有明确的width，5% auto将为auto这意味着什么。

这并不理想，但在这个特定情况下，<li>个元素width的{{1}}个auto，假设#main-nav与屏幕一样宽（视口）），你可以使用 viewport percentage unit vw 来指定相对于视口宽度的下降<a>的填充。

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

Answer 2

设置#main-nav的宽度。 E.g。

#main-nav { width: 60%; }

这只是一个例子。您可以在任何单位中设置任何宽度。但是设置适合内部内容的宽度。

Answer 3

似乎我想要的答案毕竟不可能。然而，其他解决方案与我的要求不同，但这些解决方案可能对寻找类似功能的任何人都有用。

填充百分比不适用于浮动列表项

3 个答案: