div和ul之间的奇怪垂直空间

这里是一个小提琴（http://jsfiddle.net/zq3YA/2/），显示我正在尝试纠正的事情。我想做一个时尚的，所以我想列表（ul）放在一个有边界的容器（div）下。问题是我有一个不需要的垂直空间。我已经尝试删除边距等，但没有任何工作。div和ul之间的奇怪垂直空间

下面是HTML：

<div class="selector"> 
    <div class="selector-select"> 
     <div class="selector-value"></div> 
     <a href="#" class="selector-button"></a> 
    </div>     
    <ul class="selector-list"> 
     <li class="selector-item">Toto</li> 
     <li class="selector-item">Titi</li> 
    </ul> 
</div>

这里是CSS代码：

.selector 
{ 
    width     : 200px; 
} 

.selector-select 
{ 
    margin     : 0; 
    padding     : 0; 
    position    : relative; 
} 

.selector-select, .selector-value 
{ 
    display     : inline-block; 
    height     : 20px; 
} 

.selector-select, .selector-list 
{ 
    border-style   : solid; 
    border-width   : 1px; 
    min-height    : 1px; 
} 

.selector-value 
{ 
    width     : 180px; 
} 

.selector-button 
{  
    display     : inline-block; 
    width     : 20px; 
    height     : 100%; 
    background-color  : blue; 
    position    : absolute; 
    right     : 0; 
    top      : 0; 
} 

.selector-list 
{ 
    width     : 170px; 
    list-style-type   : none; 
    margin     : 0; 
    padding     : 0; 
} 

.selector-item 
{ 
    margin     : 0; 
    padding     : 0; 
} 

.selector-item:hover 
{ 
    background-color  : blue; 
}

你有什么happends任何想法？

在此先感谢。

来源

2013-08-05 dooxe

一个答案来自@ user924016是使用'浮法left'使用类'.selector-select'的元素。但这个空间的存在的解释总是一个谜。 – dooxe

另一个解决方案来自@loops，它包含： '.selector-select，.selector-list {border = style; solid; border-width：1px; display：table; // block // inherit min-height：1px; }' – dooxe

这不是一个谜。这是g，j，y等字符的下行者留下的空间。看到我的答案。 – Alohci

这是因为具有“选择器值”类的div位于基线上，因此字符下降区有空间。

添加.selector-value { vertical-align: bottom; }的CSS

来源

2013-08-05 09:46:14 Alohci

我明白你的意思了。它也可以工作，非常感谢。 – dooxe

修复它的一种方法是使用float：left;

来源

2013-08-05 09:13:57

谢谢，它修复了它。但我不明白为什么这个空间存在。 – dooxe

只是浮.selector-select向左

http://jsfiddle.net/zq3YA/4/

来源

2013-08-05 09:17:19 mtt

.selector-select, .selector-list { 
    border-style: solid; 
    border-width: 1px; 
    display: table; //block // inherit 
    min-height: 1px; 
}

也解决了这个问题。

来源

2013-08-05 09:19:14

谢谢你这个有用的答案。 – dooxe

div和ul之间的奇怪垂直空间

回答

相关问题