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。这与浏览器兼容性更高，因为Firefox＆lt; = 2不支持display: inline-block。

如果您为ul元素指定宽度为100％（使其从左到右跨越），则第一种方法允许您拥有动态居中的列表，然后应用text-align: center。< / p>

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

Answer 2

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

Answer 3

我认为问题是，您正在尝试将宽度设置为内联元素，我不确定是否可行。一般来说，李是阻止，这将有效。

Answer 4

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

Answer 5

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

Answer 6

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

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

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

6 个答案: