小编典典

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

css

我试图制作一个导航内联列表。您可以在这里找到它
由于某些原因,它不显示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;
}

阅读 537

收藏
2020-05-16

共1个答案

小编典典

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

或者,将a float: left应用于li元素并display: block在该a元素上使用。这与跨浏览器更加兼容,display: inline-block例如Firefox <= 2不支持。

如果您将ul元素的宽度设置为100%(以使其从左边缘到右边缘跨越),然后应用apply,则第一种方法将使您拥有一个动态居中列表text-align:center

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

2020-05-16