Question

基本上这是一个菜单，在悬停时，链接两侧会出现一个单独的图像。我到目前为止，但我似乎无法摆脱链接上的白色间距。悬停时链接上方不应有空格。似乎无法弄清楚我错过了什么！？

<li><a href="#" class="button">Button 1</a></li>
<li><a href="#" class="button">Button 2</a></li>
<li><a href="#" class="button">Button 3</a></li>    

$(document).ready(function(){
    $(".button").hover(function() {
        $(this).before('<div class="buttonimgleft"></div>');
        $(this).after('<div class="buttonimgright"></div>');
                }, function() {
        $(".buttonimgleft, .buttonimgright").remove();
    });
});


body { 
    margin: 0;
}

li { 
    list-style: none;
    display: inline-block;
    margin-right: 15px;
}
.buttonimgright { 
    display: inline-block;
    background: #CC0000 url('insert-right-image.png');
    width: 15px;
    height: 20px;
}

.buttonimgleft { 
    display: inline-block; 
    background: #CC0000 url('insert-left-image.png');
    width: 15px;
    height: 20px;
} 

a { 
    height: 20px;
    color: #000;
    background: #CC0000;
    font-size: 16px;
}

这是小提琴：http://jsfiddle.net/vEXG3/1/

Answer 1

将vertical-align:top;添加到您的链接和图片div。

<强> jsFiddle example

.buttonimgright {
    display: inline-block;
    background: #CC0000 url('insert-right-image.png');
    width: 15px;
    height: 20px;
    vertical-align:top;
}
.buttonimgleft {
    display: inline-block;
    background: #CC0000 url('insert-left-image.png');
    width: 15px;
    height: 20px;
    vertical-align:top;
}
a {
    height: 20px;
    color: #000;
    background: #CC0000;
    font-size: 16px;
    vertical-align:top;
}

Answer 2

将样式vertical-align: middle;（bottom也适用）添加到.buttonimgright和buttonimgleft。

此外，您应该将样式display: inline-block;添加到a标记，因为您无法在inline元素上设置高度。

http://jsfiddle.net/mblase75/vEXG3/5/

CSS中的链接间距问题

2 个答案: