Выровнять текст рядом с div

Question

Я пытаюсь создать интерактивные слова внутри текста. Каждый раз, когда пользователь нажимает на слово, под ним открывается окно.

Вот пример:

Моя проблема каждый интерактивными слово не совпадает с текстом (разрывов строк, перекос, и т.д.), как вы можете видеть на фото.

<p>Salut, Welcome, Bienvenue chez 
 
    <div class="jargon-item"> 
 
    <a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1"> R2A</a>... 
 
    <div class="boxed" ng-show="collapsed1">Rhone-Alpes Auvergne</div> 
 
    </div> 
 
</p>

Это происходит потому, что это, как работает, но я не могу изменить это, потому что мне нужно окно, чтобы быть точно под словом. Благодарим за помощь

Answer 1

Не обертывайте div используя p. Вместо того, чтобы использовать div обернуть другой div «s

1. Добавление display: inline или display: inline-block модифицирует отображения по умолчанию свойство div в.

2. Использование position: relative родителю и position: absolute ребенка .boxed

Примечание: По умолчанию div «s отображаются в виде блока.

---

Обновление: Я спрятался текст по умолчанию, он будет виден при наведении на ссылку.

.wrapper { 
 
    position: relative; 
 
} 
 
.wrapper div { 
 
    display: inline-block; 
 
} 
 
.wrapper div.boxed { 
 
    z-index: 1; 
 
    padding: 5px 10px; 
 
    background-color: palegreen; 
 
    display: none; 
 
    position: absolute; 
 
    border: 1px solid forestgreen; 
 
    border-radius: 5px; 
 
} 
 
.jargon-item a:hover + .boxed { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    Salut, Welcome, Bienvenue chez 
 
    <div class="jargon-item"> 
 
    <a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">R2A</a>... 
 
    <div class="boxed" ng-show="collapsed1">Rhone-Alpes Auvergne</div> 
 
    </div> 
 
    Some more text here. You can add more text if you want. You can also include another link here. 
 
    <div class="jargon-item"> 
 
    <a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">Click me</a>... 
 
    <div class="boxed" ng-show="collapsed1">I added this !</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<div class="wrapper"> 
 
    Salut, Welcome, Bienvenue chez 
 
    <div class="jargon-item"> 
 
    <a href="javascript:void(0)" ng-model="collapsed1" ng-click="collapsed1=!collapsed1">R2A</a>... 
 
    <div class="boxed" ng-show="collapsed1">Rhone-Alpes Auvergne</div> 
 
    </div> 
 
</div>

Answer 2

Применить поплавок: левый к каждому элементу.