2

这是一个小提琴（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;
}

你知道发生了什么吗？

提前致谢。

4

4 回答 4

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

也解决了问题。

于 2013-08-05T09:19:14.137 回答
0

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

于 2013-08-05T09:13:57.963 回答
0

只是飘到.selector-select左边

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

于 2013-08-05T09:17:19.027 回答
0

这是因为具有“selector-value”类的 div 位于基线上，因此字符下降器有空间。

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

于 2013-08-05T09:46:14.940 回答