Я хочу переместить изображение, находящееся в теге div, не перемещая весь тег div

Question

Я создаю горизонтальную навигационную панель с изображением в ней, панель навигации содержит четыре ссылки, одна из которых является ссылкой на изображение, однако ссылка на изображение не совпадает с остальными ссылками на навигационной панели, я хочу сбросить ее на пиксель или 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

SNIPPET

#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>