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

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图制作一个导航内联列表。您可以在这里找到它

由于某些原因，它不显示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元素中删除宽度和高度。

或者，将a float: left应用于li元素并display: block在该a元素上使用。这与跨浏览器更加兼容，display:

inline-block例如Firefox <= 2不支持。

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

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

以上是 CSS列表项的宽度/高度不起作用 的全部内容， 来源链接： utcz.com/qa/412041.html

回到顶部