0

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

有一个Header和NavBar一些<a>项目。

问题 ：

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

你可以在下面清楚地看到。

提前致谢。

JsFiddle 中的演示。

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

6 回答 6

5

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

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

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

于 2013-07-04T19:55:19.020 回答
3

当您在 CSS 中使用百分比时，百分比所指的总和取决于您使用的属性。在CSS 规范中，有一个小表格padding：

'填充'

值：<填充宽度>{1,4} | 继承
初始：查看单个属性
适用于：除 table-row-group、table-header-group、table-footer-group、table-row、table-column-group 和 table-column 之外的所有元素
继承：无
百分比：参考包含块的宽度
媒体：视觉
计算值：查看各个属性

但什么是包含块？

细节很复杂，但适用于你的情况的部分是 subrule (4)(2)，它说

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

也就是说，当指定为百分比时，填充的大小是指应用填充后框的大小！由于您是根据自身定义某些东西，这没有任何意义，因此浏览器会做一些荒谬的事情。

这就是为什么——你能做些什么呢？正如您所发现的，最简单的事情是在这种情况下只使用百分比以外的东西来指定填充。

于 2013-07-04T20:08:31.067 回答
2

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

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

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

于 2013-07-04T19:54:01.950 回答
2

您应该将宽度应用于“li”而不是“a”

#NavBar ul li { 
float: left; 
width: 15%;
background-color: #12aeef;
}
于 2013-07-04T19:55:04.063 回答
2
于 2013-07-04T19:56:47.683 回答
1

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

于 2013-07-04T19:54:41.293 回答