CSS列表项宽度/高度不工作 [英] CSS list item width/height does not work

问题描述

我试图做一个导航内联列表。您可以在这里找到： http://www.luukratief-design.nl/ dump / parallax / para.html

I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html

由于某种原因，它不显示LI的宽度和高度。这里是代码段。这是什么问题？

For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?

.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;
}

推荐答案

声明<$ c $将 li 中的宽度和高度放置为 a 元素 display：inline-block c>元素。

Declare the a element as display: inline-block and drop the width and height from the li element.

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

Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.

如果你给 ul 元素的宽度为100％，第一个方法允许你有一个动态居中的列表）然后应用 text-align：center 。

The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.

使用 code>来控制元素内的文本的Y位置。

Use line-height to control the text's Y-position inside the element.

这篇关于CSS列表项宽度/高度不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！