[英]How to remove the extra white space at the bottom of the panels
我有一個下拉菜單系統。 我的下拉面板包含一個列表菜單和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
有沒有人有解決辦法刪除多余的空白?
謝謝。
瀏覽器還在內inline
元素上呈現空白,快速修復方法是將容器上的font-size:0
設置為項目,並將其重置為font-size:16px
。
但是,在您的情況下,您可以只刪除.menudropdown .fourblocks {display:inline-block;}
,並根據需要將其設置為float:left
。
更新的演示: http : //jsfiddle.net/s7yr93hj/1/
更改inline-block
到inline
在.fourblocks
DIV
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.