javascript - 将图标与 p 标签对齐

Question

我有一段代码如下

<p class= "p_class" id="txtUserStatus">Add a description about your self.. </p>

<i class="fa fa-pencil" aria-hidden="true" id="btnEditStatus"></i>
<input type="text" id="place_id" rows="4" cols="50" name="comment" form="usrform" style ="display:none;">
<span class="fa-stack fa-1x" id = "okID" style = "display:none;">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-check fa-stack-1x" aria-hidden="true"></i>
</span>

我想在 p 标签之后对齐/放置铅笔图标，但我无法做到。

单击 p 时，您会看到一个文本框和 ok 图标，因此默认情况下，铅笔图标应位于 ok 图标的位置。

谁能帮我做这个简单的 CSS 修复。

这是 fiddle .

注意:不要让我的图标类在 p 标签内。

Answer 1

只需将 display: inline-block 提供给您的 .p_class 类即可。

这将使您的 .p_class div 不会占据容器的整个宽度，并且您的 .fa-pencil 图标是 display: inline- block默认会占用.p_class之后的空间。

.p_class {
  display: inline-block;
}