css - CSS 导航栏中的图像

Question

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

它为整个 ul 添加了太多空间，即使图像没有超出蓝色齿轮之外的单个像素也是如此。

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

导航栏 nav bar

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 规则，以确保图像永远不会大于其周围的文本。

.menu img {
  height:1em;
}

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

这是一个工作示例: http://codepen.io/anon/pen/LZRaWL

如果齿轮太小，则减少填充并增加齿轮的尺寸。这是第二个示例，其中我利用了 em 单位的相对大小: http://codepen.io/anon/pen/gMwEmj