html - CSS列表高度问题

Question

所以我试图做一个很酷的导航，但我似乎遇到了一个不寻常的问题，我似乎无法增加我的列表项的高度。我希望它们是固定的 45 像素，因此当您将元素悬停时它看起来不错。但似乎当我将元素悬停时，尽管我设置了 45px，但列表项的高度仅为 20px。有任何想法吗？

这是我的列表样式代码

.nav li{
height:45px!important;
min-height:45px!important;
display:inline;
list-style: none;
padding-right:40px;
padding-left:40px;
color:#dddddd;
text-shadow: 0 1px 1px rgba(0,0,0,.60);
margin-left:-4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

JSFiddle - http://jsfiddle.net/E9Ejd/

Answer 1

首先，您的 html 有点奇怪。将锚点放在列表项内。

<ul><li><a href="#">Link 1</a></li></ul>

然后将你的显示为一个块并给它一个高度。

ul li a{display:block; height:45px;}

Answer 2

1）重置您的列表：

ul, li {margin:0;padding:0}

2）使用display:block并放置所有样式（除了position: float:and display:）并将所有样式放在A-tag 上，而不是LI.

3) 切勿使用!important。