显示内联块，导致出现奇怪的行

Question

这是我的代码：http://jsfiddle.net/spadez/qXZFW/10/

在左侧的菜单上，显示内联块似乎会在每段文本的开头显示一行

.nav-sprite {
  background: url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
display: inline-block;
background-repeat: no-repeat;
padding: 15px;
margin-right: 12px;
vertical-align: middle;
}

如果我删除它，布局会更改并分开调用。任何人都可以解释为什么会发生这种情况以及我如何解决它。

Answer 1

将text-decoration: none;添加到.nav li a - 这将解决问题。这只是你看到的链接的下划线。

Answer 2

之所以发生这种情况，是因为您使用的锚标签默认具有属性“text-decoration：underline”，请使用以下规则来解决此问题。

.nav li a{
    text-decoration: none;
}