CSS列表高度问题

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

这里是我的列表样式

.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码 - 所有的HTML的http://jsfiddle.net/E9Ejd/

来源

2013-09-25 user2598957

首先是有点奇怪。将锚点放入列表项中。

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

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

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

来源

2013-09-25 14:36:43 Dale

啊哈我的坏与href谢谢！ – user2598957

事实上，列表（ul/ol）只能将子项列表作为子项（或者它们至少未通过验证）。列表项（li）可以在HTML5下有任何东西（非常多） –

为了扩大这一点，你需要将它设置为“display：block”的原因是因为高度在“display：inline “元素。内联元素的高度可以用“行高”而不是“高度”来设置。 – meobyte

1）重置您的列表：

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

2）使用display:block，并把所有的造型（比position:float:和display:等），并把所有的造型上A - 标签，而不是LI。

3）千万不要使用!important。

来源

2013-09-25 14:36:53

CSS列表高度问题

回答

相关问题