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;
}

你知道发生了什么吗？

提前致谢。

Answer 1

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

也解决了这个问题。

Answer 2

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

Answer 3

将.selector-select向左浮动

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

Answer 4

这是因为带有“selector-value”类的div位于基线上，所以有字符下行空间。

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

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

4 个答案: