Question

可能有一个简单的解决办法，但困扰我......

Header和NavBar有一些<a>项。

问题：

当我使用时，例如padding: 20px它工作正常，但在使用百分比%填充时，例如padding: 10%代替px，结果看起来不应该是。

你可以在下面看清楚。

提前致谢。

HTML

<div id="Header">
 <div id="NavBar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contant</a></li>
        <li><a href="#">About us</a></li>
    </ul>
 </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#Header {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #ccc;
}
#NavBar ul { list-style-type: none;}
#NavBar ul li { float: left; }
#NavBar ul li a {
    padding: 50px; /* It works fine */
    padding: 15%; /* The problem is here */
    background-color: #12aeef;
}

Answer 1

列表项需要维度来计算％。试试这个：

#NavBar ul li a {
padding: 15%; 
display:inline-block;
height: 100%;
width: 80px;
background-color: #12aeef;
}

更新了小提琴：http://jsfiddle.net/YhX2r/10/

Answer 2

在CSS中使用百分比时，所引用的百分比总和取决于您正在使用的属性。在the CSS specification中，padding有一个小表：

'填充'


值：＆lt; padding-width＆gt; {1,4} |继承
    初始：查看个别属性
    适用于：除table-row-group，table-header-group，table-footer-group，table-row，table-column-group和table-column
之外的所有元素     继承：没有     百分比：指包含块的宽度
    媒体：视觉
    计算值：参见个别属性

但是什么是包含块？

The details are complicated，但在您的情况下适用的部分是subrule（4）（2），其中说

元素的包含块定义为...... 包含块由祖先的填充边缘形成。

也就是说，当指定为百分比时，填充的大小是指应用填充后的框的大小！既然你用自己来定义某些东西，这没有任何意义，浏览器会做一些荒谬的事情。

这就是为什么 - 你能做些什么呢？最简单的是，正如您所发现的那样，在这种情况下，只使用百分比以外的其他内容来指定填充。

Answer 3

http://jsfiddle.net/YhX2r/7/

display: inline-block;
padding: 0 15%;

有关所有显示选项的详细说明，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 4

您应该为“li”而不是“a”

应用宽度

#NavBar ul li { 
float: left; 
width: 15%;
background-color: #12aeef;
}

Answer 5

解释观察到的行为：

填充：10％而不是px，结果看起来不应该是。

嗯，确实如此 - 虽然它可能不是你想要或想要的。

http://www.w3.org/TR/CSS21/box.html#padding-properties：

“百分比是根据生成的框的包含块的宽度计算的，即使是'padding-top'和'padding-bottom'。”

Answer 6

默认情况下，

<a>元素为display: inline，不允许您处理百分比。
尝试在CSS中使用display: inline-block，可能不会破坏您的设计（但我可能错了）

<a> tag</a>上的CSS百分比填充

6 个答案: