我想知道为什么在下面的例子中,顶部和底部填充对左侧和右侧的锚标签没有影响? <ul id="nav"> <li><a href="#">One</a></li> <li><a h
... . . 我想知道为什么在下面的例子中,顶部和底部填充对左侧和右侧的锚标签没有影响?
<ul id="nav"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li></ul> #nav{ list-style:none; } #nav li{ border:1px solid #666; display:inline; /*If you do it this way you need to set the top and bottom padding to be the same here as under #nav li a padding:8px 0; */ } #nav li a{ padding:8px 16px; }
示例:Link
所以我的主要问题是,为什么顶部和底部填充对列表项没有影响,而左和右呢?
我确实尝试了this out与浮动而不是显示:在列表项上内联,它按照我的预期工作.所以我想如果我有一个次要问题,那么浮点数之间的区别是什么?和显示:内联?我正在阅读the float spec,它听起来像一个浮动仍然是一个在线内联盒,所以有点像内联块?
我感谢任何输入,这不是我完成一个项目或任何事情我需要知道的东西,但我想知道为什么.
谢谢
列维
解决方法
. 锚是内联元素.只有块级元素可以更改顶部/底部属性.
您可以执行以下操作:
a{ display: block; float: left;}
浮动是必要的,因为块级元素占据了它们所在容器的整个宽度.你必须编写一些额外的规则来清除它.无论哪种方式,都要看看它是如何运作的.
. . .. ...