Question

当选择一个元素时，我的列表下面会出现一个空白区域（当前是一条黑线）（列表中的所有元素都是图像）。我发现一些线程建议使用vertical-align：middle和display：inline-block，但是我的代码和JSFiddle：http://jsfiddle.net/6geo6qkv/

都没有工作或我把它放在错误的位置

HTML

<div id="Gfilter">
    <ul id="grade" class="option-set sort">
        <li>
            <a href="#" data-filter="*" class="selected"><img src="images/Filtre2.png" width="150"/></a>
        </li>
        <li>
            <a href="#" data-filter=".1"><img src="images/Filtre2.png" width="150"/></a>
        </li>
    </ul>
</div>

CSS

#Gfilter {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    vertical-align: middle;
}

.sort {
    width: 100%;
    font-size:55px;
}

.sort li {
    display:inline-block;
}

.sort ul {
    text-align:center;
}

.selected {
    background:black;
    vertical-align:middle;
}

Answer 1

将此添加到您的css

#grade a{
  display:block;
  line-height: 0;
}

~~另外请修改您的HTML，每个img标记的末尾都有一个/img>，这是不必要的。~~

图像列表下方的空间HTML / CSS

1 个答案: