css - 我想在不移动整个 div 标签的情况下重新定位 div 标签内的图像

Question

我正在制作一个带有图像的水平导航栏，导航栏共有四个链接，其中一个是图像链接，但是图像链接与导航栏上的其余链接不对齐我想将它降低一个或两个像素，但每次我尝试重新定位该图像时，它都会带来 div 标签中的其余链接。

{ position:absolute； } 和 { position:relative； } 将图片链接放在其他链接之上

http://i.imgur.com/v7Cg9kJ.jpg正常情况下的样子。

http://i.imgur.com/abaIdwE.jpg具有绝对定位。

Answer 1

尝试以下操作:

li {
  display: inline-block;
  margin: 0 5px 0 0;
}

#apps {
  vertical-align: middle;
}

DEMO

片段

#top-navbar {
  float: right;
  display: block;
  padding: 10px;
  word-spacing: 5px;
  text-align: center;
  font-family: Arial;
  font-size: 13pt;
  position: relative;
}
#signin {
  background-color: #4387FD;
  color: white;
  width: 120px;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  word-spacing: 1px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 5px 0 0;
}
#apps {
  vertical-align: middle;
}
a {
  text-decoration: none;
}

<div id="top-navbar">
  <ul>
    <li>Gmail</li>
    <li>Images</li>
    <li>
      <a href="https://www.google.com/intl/en/options/">
        <img id="apps" src="https://lh3.ggpht.com/ExOY2XlSbdfFFE3BZ5l44wBQEU5JVsVrertIIdjPy93yfDfomhKx0waLXA9Hhv5qvg-b3aaq=w22" />
      </a>
    </li>
    <li>
      <a id="signin" href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/webhp%3Fhl%3Den">Sign In</a>
    </li>
  </ul>

</div>