html - 列表中的图像链接的位置很奇怪

当前，没有在图标上添加图像链接，它们看起来像这样：



我的代码如下所示：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul style="padding-left:10px;" class="nav navbar-nav"> <
              <li><img src="img/FB.png" class="img-responsive" alt="Facebook"  width="52px" ></li>
              <li><img src="img/TW.png" class="img-responsive" alt="Twitter"  width="52px" > </li>
              <li><img src="img/PI.png" class="img-responsive" alt="Pinterest"  width="52px" ></li>
           </ul>

但是，一旦我开始将其中一个图标更改为图像链接，它就会变成这样



它的代码是：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul style="padding-left:10px;" class="nav navbar-nav"> <!-- Content on the left side of the navigation bar  -->
              <li><a href="http://facebook.com"><img src="img/FB.png" class="img-responsive" alt="Facebook" border="0"  width="52px" ></a></li>
              <li><img src="img/TW.png" class="img-responsive" alt="Twitter"  width="52px" > </li>
              <li><img src="img/PI.png" class="img-responsive" alt="Pinterest"  width="52px" ></li>
           </ul>

我该怎么做才能解决此问题？

最佳答案

Bootstrap具有自己的属性，因此您需要替换它们。

.nav > li > a {
     padding-top: 0px !important;
}

关于html - 列表中的图像链接的位置很奇怪，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32757146/