对齐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的

1. 添加display: inline或display: inline-block会修改div的默认显示属性。

2. 使用position: relative给父母position: absolute给孩子.boxed

注意：默认情况下，div显示为阻止。

<小时/> 更新：我默认隐藏了文字，当您将鼠标悬停在链接上时，它会显示。

.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

将float：left应用于每个元素。