Элементы внутри div не выстраиваются на один уровень

@RyRuso · Регистрация: 20.12.2014

Студворк — интернет-сервис помощи студентам

Добрый день!
Есть одна проблема и я не понимаю, как ее решить. Надеюсь на вашу помощь.
Внутри формы имеется div, внутри которого три ссылки <a бла-бла-бла></a>, две крайние ссылки - картинки, средняя - текст с контуром. Код всего этого безобразия:

HTML5
1
2
3
4
5
<div class="news_nav">
<a class="prev_news" title="Предыдущая новость" href="../"> </a>
<a class="back_to_news" href="./"> К списку новостей </a>
<a class="next_news" title="Следующая новость" href="../"> </a>
</div>

К этому коду привязывается css следующего содержания:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.next_news {
  display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 10px;
  background: red no-repeat;
  background-size: 24px 24px;
  }
.prev_news {
  display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
  background: black no-repeat;
  background-size: 24px 24px;
  }
.news_nav {
    margin:0 auto;
    width: 100%;
}
.back_to_news { 
margin-top: -30px;
border: 2px solid;
border-radius: 1em;
padding: 4px;
color: black;
}

Проблема в том, что средний элемент получается чуть ниже боковых, что выглядит некрасиво. Я пыталась его вытянуть margin-ом, но не получается. Подскажите пожалуйста, что я делаю не так?
P.S. В фиддле это хорошо видно: https://jsfiddle.net/dfxh77e7/

@Koss92 · 22.07.2015, 13:19

Попробуйте использовать для ссылок position:absolute

@RyRuso · 22.07.2015, 15:07 **[ТС]**

Сообщение от Koss92

Попробуйте использовать для ссылок position:absolute

Спасибо! Получилось, как надо.
Интересно все же, почему без абсолютного позиционирования съезжает

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@Koss92 0 / 0 / 0 Регистрация: 05.04.2015 Сообщений: 2
	22.07.2015, 13:19
	Попробуйте использовать для ссылок position:absolute 0