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
中的宽度和高度放置为 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屋!