Question

我正在尝试添加一个图标作为导航栏中的最后一个链接。

它为整个ul添加了太多空间，即使图像没有将单个像素延伸到蓝色齿轮之外。

我尝试将边距，填充和行高设置为0，它仍然会扩展块。

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: sans-serif;
}

li {
    float: left;
}

li a {
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
}

HTML

<ul class="menu">
  <li><a href="#">PRODUCTION</a></li>
  <li><a href="#">OFFICE</a></li>
  <li><a href="#">SALES</a></li>
  <li><a href="#">MISC</a></li>
  <li><a href="#">ADMIN</a></li>
  <li><a href="#">GEAR</a></li>
  <!--<li><a id="gear" href="#"><img src="gear.png"/></a></li> -->
</ul>

图像 Gear Image

Answer 1

您可以轻松添加此CSS规则，以确保图片永远不会比周围的文字大。

em

如果没有准确的图像文件，我无法提出更具体/更优雅的解决方案：

这是一个有效的例子： http://codepen.io/anon/pen/LZRaWL

如果齿轮太小，则减少衬垫并增加齿轮的尺寸。这是我利用PathVariable单位的相对大小的第二个例子： http://codepen.io/anon/pen/gMwEmj

CSS导航栏中的图像

1 个答案: