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的{{1}}图标会占用display: inline-block之后的空格。

.p_class

Answer 2

我认为您希望标记后图标浮动 CSS：

i {float:left}

Answer 3

将以下内容添加到css：

.p_class {
  display: inline-block;
}

Answer 4

尝试以下方法： .p_class { float: left; }

Answer 5

您可以将display：inline-block添加到class＆＃34; p_class＆＃34;

Answer 6

只需添加以下课程

#txtUserStatus{
   display: inline-block;
}

Answer 7

如果您想在<p>之后执行您的图标：

p::after {
    content:url(youricon.png);
    <related CSS here>
}

将图标与p标记对齐

7 个答案: