CSS中的链接间距问题答案

【问题标题】：Link Spacing Issue in CSSCSS中的链接间距问题
【发布时间】：2013-04-01 14:39:45
【问题描述】：

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

<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/

【问题讨论】：

一点不请自来的建议：CSS 的想法是共享规则并仅修改异常。您有显示、宽度和高度相同的元素；它们可以共享相同的规则，而不是重新声明。 :)
尽管它们不共享相同的背景图像。有什么建议吗？
不是说这是完美的，但想法是这样的：jsfiddle.net/vEXG3/8 字符少了一点，但更重要的是，您可以在一个规则中进行更改，而不是三个。

标签： jquery button hover

【解决方案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;
}

【讨论】：

解决了！这行得通。我所要做的就是将 display: inline-block 添加到链接元素中，它可以按我的意愿工作。感谢大家在这里输入！更新小提琴：jsfiddle.net/vEXG3/6
那么，基本上，您按照我的回答中的说明进行操作，但接受了这个？（不，我不是苦涩，只是困惑。）

【解决方案2】：

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

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

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

【讨论】：

谢谢，但仍有一些空白。你知道我怎样才能完全摆脱它，让左/右图像无缝排列吗？
按照我第二段中的说明，确保所有三个元素的高度相同。