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

Question

這裏是一個小提琴（http://jsfiddle.net/zq3YA/2/），顯示我正在嘗試糾正的事情。 我想做一個時尚的，所以我想列表（ul）放在一個有邊界的容器（div）下。問題是我有一個不需要的垂直空間。我已經嘗試刪除邊距等，但沒有任何工作。

下面是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任何想法？

在此先感謝。

Answer 1

這是因爲具有「選擇器值」類的div位於基線上，因此字符下降區有空間。

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

Answer 2

修復它的一種方法是使用float：left;

Answer 3

只是浮.selector-select向左

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

Answer 4

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

也解決了這個問題。