我试图制作一个导航内联列表。您可以在这里找到它 由于某些原因,它不显示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
display: inline-block
li
或者,将a float: left应用于li元素并display: block在该a元素上使用。这与跨浏览器更加兼容,display: inline-block例如Firefox <= 2不支持。
float: left
display: block
如果您将ul元素的宽度设置为100%(以使其从左边缘到右边缘跨越),然后应用apply,则第一种方法将使您拥有一个动态居中列表text-align:center。
ul
text-align:center
使用line-height控制单元内的文本的Y位置。
line-height