微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS列表项宽度/高度不工作

我试图做一个导航内联列表。你可以在这里找到它: http://www.luukratief-design.nl/dump/parallax/para.html

由于某些原因,它不显示LI的宽度和高度。这里是代码段。这有什么问题?

.navcontainer-top li {
    font-family: "Verdana",sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-align: center;
    display: inline;
    list-style-type: none;<br>
    width: 117px;
    height: 26px;
}


.navcontainer-top li a {
    background: url("../images/nav-button.png") no-repeat;
    color: #FFFFFF;
    text-decoration: none;
    width: 117px;
    height: 26px;
    margin-left: 2px;
    margin-right: 2px;
}
.navcontainer-top li a:hover {
    background: url("../images/nav-button-hover.png") no-repeat;
    color: #dedede;
}

解决方法

将a元素声明为display:inline-block并从li元素中删除宽度和高度。

或者,将float:left应用于li元素,并在a元素上使用display:block。这是一个更多的跨浏览器兼容,如显示:inline-block不支持在Firefox< = 2例如。 第一种方法允许您有一个动态居中列表,如果您给ul元素的宽度为100%(以便它横跨从左到右边缘),然后应用文本对齐:中心。 使用line-height控制元素中文本的Y位置。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。