CSS列表项宽度/高度不起作用

Question

我试图制作导航内联列表.你可以在这里找到它: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;
}

Answer 1

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

另外,适用float: left于li元素,并使用display: block上a的元素.这与浏览器兼容性更高display: inline-block,例如Firefox <= 2不支持.

第一种方法允许您拥有动态居中的列表,如果您为ul元素赋予100%的宽度(使其从左边缘到右边缘),然后应用text-align: center.

使用line-height控制单元内的文本的Y位置.

Answer 2

内联项目不能有宽度.你必须使用display: block或display:inline-block,但后者在任何地方都不受支持.