Как выровнять изображение с оставшимися ссылками в следующем списке?
<div id="barra">
<ul id="botoes">
<li><a href="/o-meu-perfil"><img src="image.png" width="25" height="25"></a>
</li>
<li><a href="#">Perguntas</a>
</li>
<li><a href="/o-meu-perfil">Pesquisa</a>
</li>
</ul>
</div>
Это CSS:
#barra {
position:fixed;
height:35px;
border-bottom: solid 1px;
top:50px;
background: rgba(250, 0, 250, 0.75);
border-radius: 2px;
}
#botoes li {
display: inline-block;
list-style-type: none;
padding-right: 5px;
vertical-align: top;
line-height: 10px;
}
И изображение:
И как выровнять все это слева от бара? Вы можете проверить код по адресу: http://jsfiddle.net/pFBT9/1/
вот решение
//HTML
<div id="barra">
<ul id="botoes">
<li><a href="#" > <img src="image.png" width="25" height="25">Perguntas</a>
</li>
<li><a href="/o-meu-perfil"><img src="image.png" width="25" height="25">Pesquisa</a>
</li>
</ul>
</div>
//CSS
#barra {
position:fixed;
height:35px;
border-bottom: solid 1px;
top:50px;
background: rgba(250, 0, 250, 0.75);
border-radius: 2px;
}
#botoes li {
display: inline-block;
list-style-type: none;
padding-right: 20px;
vertical-align: top;
line-height:5px;
}
#botoes img {
margin-top:-10px;
}
Добавьте отрицательный запас в img
.
#botoes img {
margin-top:-10px;
}
EDIT: твердая статья об отрицательных маржах и почему это нормально использовать их.
РЕДАКТИРОВАТЬ 2: В случае с downvoter вы могли бы оставить комментарий, объясняющий почему?
Попробуйте удалить неотъемлемые поля из ul.
#botoes {
margin: 0;
}
и удалите высоту строки:
#botoes li {
line-height: auto;
}