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

我试图制作一个导航内嵌列表。你可以在这里找到它：http://www.luukratief-design.nl/dump/parallax/para.html 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; 
}

来源

2010-02-19 Luuk

声明a元件作为display: inline-block和从li元素拖放的宽度和高度。

或者，将float: left应用于li元素，并在a元素上使用display: block。这是更多的跨浏览器兼容，因为display: inline-block不支持在Firefox < = 2例如。

第一种方法允许你如果你给ul元件的100％的宽度（使得它跨越从左至右的边缘），然后应用text-align: center有一个动态居中列表。使用line-height来控制元素内文字的Y位置。

来源

2010-02-19 09:51:29

非常感谢你！帮助我很多 – Luuk 2010-02-19 09:56:51

我认为问题是，你试图设置宽度为一个内联元素，我不知道是可能的。一般来说，李是封锁，这将工作。

来源

2010-02-19 09:51:36 anthares

在内联元素上使用宽度/高度并不总是一个好主意。您可以使用display: inline-block代替

来源

2010-02-19 09:51:51

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

来源

2010-02-19 09:52:04 Ikke

从.navcontainer-top li样式中删除<br>。

来源

2010-02-19 09:52:47 Paolo

我有一个类似的问题，试图修复项目大小，以适应背景图像的宽度。这工作（至少与Firefox 35）对我来说：

.navcontainer-top li 
{ 
    display: inline-block; 
    background: url("../images/nav-button.png") no-repeat; 
    width: 117px; 
    height: 26px; 
}

来源

2015-02-15 21:47:45

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

回答

相关问题