Выровняйте горизонтальные изображения и текстовые ссылки внутри ul

Question

Выровняйте горизонтальные изображения и текстовые ссылки внутри ul

0

Как выровнять изображение с оставшимися ссылками в следующем списке?

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

Nuno Nogueira 18 сен. 2013, в 19:12

Источник

Теги:

html

css

3 ответа

Ещё вопросы

luckyamit · Answer 1 · 2013-09-18T16-36-00.000Z

вот решение

//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;
}

Jason · Answer 2 · 2013-09-18T15-43-00.000Z

Добавьте отрицательный запас в img.

#botoes img {
    margin-top:-10px;
}

Обновлен jsFiddle

EDIT: твердая статья об отрицательных маржах и почему это нормально использовать их.

РЕДАКТИРОВАТЬ 2: В случае с downvoter вы могли бы оставить комментарий, объясняющий почему?

Это сработало довольно хорошо. Также для выравнивания всего объекта влево. Спасибо!

Chad · Answer 3 · 2013-09-18T14-40-00.000Z

Попробуйте удалить неотъемлемые поля из ul.

#botoes {
    margin: 0;
}

и удалите высоту строки:

#botoes li {
    line-height: auto;
}

скрипка