Question

我有一个下拉菜单系统。我的下拉面板包含一个列表菜单和3个图像。

#menu {width:1000px;margin:0px auto 0px auto}
#menu #holder{
	display: block;
	width: 100%;
	list-style:none;margin:0px;padding:0px;
}
#menu .menuaholder{margin:0;padding:0;display:inline-block;width:auto}
#menu .menudropdown{z-index: 3;position:absolute;display:none;background-color:#ffffff;-moz-box-shadow: 0 0 6px #c4c4c4;
-webkit-box-shadow: 0 0 6px #c4c4c4;
box-shadow: 0 0 6px #c4c4c4;}
#menu .menuaholder .full{padding:10px;width:980px;text-align:left;}
#menu .menuitem{display:block;padding:5px;color:#000000;}
#menu .menuitem:hover{background-color:#edf0f1;color:#B7B67E;}
#menu .menuaholder:hover .menudropdown{display:table;}
#menu a.item{
list-style-type: none;
list-style-image: none;
color: #999999;
padding: 5px 6px 6px 6px;
height: 15px;
font-size: 12px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 30px;
line-height: 30px;
text-transform: uppercase;
	}
.menudropdown .fourblocks .block{width:25%;margin:0px 0px 0px 0px;float:left}
.menudropdown .fourblocks .block:last-child{margin-right:0px}
.menudropdown .fourblocks{display:inline-block;margin-bottom:0px;width:980px}
.twoblocks img, .fourblocks img, .menudropdown .fourblocks img, .threeblocks img, .unevenblocks img, .unevenblocks2 img{display:block;width:100%;height:auto;}

<div id="menu">
<div id="holder">
<div class="menuaholder even"><a href="index.html" class="item">Lighting</a><div class="menudropdown full">
<div class="fourblocks">
<div class="block">
<a href="wall-lights.html" class="menuitem" title="Wall Lights">Wall Lights</a>
<a href="spot-lights.html" class="menuitem" title="Spot Lights">Spot Lights</a>
<a href="pendant-lights.html" class="menuitem" title="Pendant Lights">Pendant Lights</a>
<a href="chandeliers.html" class="menuitem">Chandeliers</a>
</div>
<div class="block">
<img src="http://lorempixel.com/200/200/" alt="LINK" title="LINK" width="200" height="200"></div>
<div class="block">
<img src="http://lorempixel.com/200/200/" alt="LINK" title="LINK" width="200" height="200"></div>
<div class="block forie">
<img src="http://lorempixel.com/200/200/" alt="LINK" title="LINK" width="200" height="200"></div>
</div>
</div></div>
</div>
</div>

以下是http://jsfiddle.net/s7yr93hj/向您展示。

面板周围有10px填充物，但是在面板底部，我似乎有一个大于10px的间隙，我想删除。

我的第一个想法是图片是display:inline，但我的样式包括display:block以删除它们下面的任何不需要的空白区域，但问题仍然存在。

外部div的高度似乎高于内容。下拉面板将具有不同的高度，因此我不想将height添加到样式下拉面板

有没有人有解决方案来删除多余的空格？

谢谢。

Answer 1

将inline-block div

上的inline更改为.fourblocks

如何删除面板底部的额外空白区域

1 个答案: