Html CSS上的填充百分比<；a>；标签

也许有一个简单的解决办法，但困扰着我

有一个

标题

和

导航栏

以及一些

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中使用
display:inline block
，它可能不会破坏您的设计（但我可能会错）
您应该对“li”应用宽度，而不是“a”

列表项需要维度来计算百分比。试试这个：

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

更新了fiddle:
以解释观察到的行为：

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

嗯，的确如此——尽管这可能不是你所期望的或想要的

:

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

在CSS中使用百分比时，百分比所指的总数取决于您使用的属性。在中，有一个用于填充的小表格：

“填充”

值：{1,4}|继承

首字母：参见单个属性

适用于：除表行组、表页眉组、表页脚组、表行、表列组和表列之外的所有元素

继承：否

百分比：指包含块的宽度

媒体：可视

计算值：请参见各个属性

但什么是包含块

，但适用于你的部分是第（4）（2）款

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

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

这就是为什么你能做些什么？正如您所发现的，最简单的方法是，在本例中，仅使用百分比以外的其他值来指定填充。
精彩的解释。谢谢元素确实有维度来计算%而不显式指定宽度。。。
display: inline-block;
padding: 0 15%;

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

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