html – 填充LI元素

概述我无法在我的< li>中使用padding属性.标签. 这是我的CSS： .menu li{ height:50px; display: inline; padding:10px 15px 18px 15px; border-style: solid; border-width: 0px 2px; -moz-border-image: url(../img/me @H_502_1@ 我无法在我的< li>中使用padding属性.标签.

这是我的CSS：

.menu li{   height:50px;   display: inline;   padding:10px 15px 18px 15px;   border-style: solID;   border-wIDth: 0px 2px;   -moz-border-image: url(../img/menuborder.png) 0 2 stretch repeat;   -webkit-border-image: url(../img/menuborder.png) 0 2 stretch repeat;   -o-border-image: url(../img/menuborder.png) 0 2 stretch repeat;   border-image: url(../img/menuborder.png) 0 2 stretch repeat;   border-right:0;}.menu a{   color:#fff;   text-decoration: none;   padding-top:10px;}

这是我的.HTML：

<ul >        <li><a href="#">Dashboard</a></li>        <li><a href="#">Incentives</a></li>        <li><a href="#">Forum</a></li>        <li><a href="#">Forum</a></li>        <li ><a href="#">Help</a></li>    </ul>

然而,填充顶部似乎不会影响a和li标签内的文本.

我究竟做错了什么？

谢谢.

解决方法 您可能需要将填充应用于元素.并且你需要为顶部/底部填充设置块级元素：

.menu a {     color: #fff;    display: inline-block;    text-decoration: none;    padding: 10px 15px 18px 15px;}

注意：在ie7及以下版本中仅部分支持内联块.你可以使用display：block;和float：如果上面的方法没有按预期工作,则为left.

同样重要的是,这里的基本问题是显示：CSS中的lis内联,以及默认情况下a标记是内联的这一事实.您不能将顶部/底部填充应用于内联元素.

总结

以上是内存溢出为你收集整理的html – 填充LI元素全部内容，希望文章能够帮你解决html – 填充LI元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。