CSS 导航栏中的图像

Question

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

它向整个 ul 添加了太多 space，即使图像没有超出蓝色齿轮之外的单个像素。

我试过将边距、填充和行高设置为 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 规则，以确保图片永远不会大于其周围的文字。

.menu img {
  height:1em;
}

没有准确的图像文件，我无法想出更specific/elegant的解决方案：

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

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

CSS 导航栏中的图像

Image in CSS nav bar

css

space

image

nav