Question

我正在制作一个带有图像的水平导航栏，导航栏总共有四个链接，其中一个是图像链接，但图像链接与导航中的其余链接不对齐bar我想把它放下一个像素或2，但每当我尝试重新定位该图像时，它会带来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>

我想重新定位div标签内的图像而不移动整个div标签

1 个答案: