Сделать HTML-элемент не занимать место

Question

У меня есть элемент, который добавляется динамически в начале некоторых других элементов.Я хочу, чтобы он отображался рядом с текстом, но не занимал места и не испортил мой макет.Вот что у меня есть:

<nav>
   <a href="webdev.html">Web Development</a>
   <a href="libraries.html">Libraries</a>
   <a href="software.html">Software</a>
   <a href="contact.html">Contact</a>
</nav>

и

nav {
    text-align: center;
}

nav a {
   color: gray;
   font-size: x-large;
   margin-left: 60px;
   margin-right: 10px;
   text-decoration: none;
}

Я хочу, чтобы элемент (шар) отображался рядом с моими навигационными ссылками, не перемещая их.Я пробовал некоторые вещи позиционирования, но они не работают (например, float: left, трюки на полях, position: absolute).

Answer 1

Мне нужно было настроить поля.Поскольку изображение имеет фиксированную ширину, я просто вычитал, поэтому:

nav a.selected {
     margin-left: 28px;
}

Answer 2

Вы хотите, чтобы изображение отображалось в качестве фона.

 background-image: url("file.png");

Если вы хотите другой элемент, он может быть другим. Можете ли вы уточнить?