对准p标签

图标我有这样的代码下面对准p标签

<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标签内。

来源

2017-03-21 Suraj

为什么需要CSS？只要把'i'放在'p'里：https：//jsfiddle.net/8sf3ztor/3/ –

刚刚加了一个便条，我不想那么做。 – Suraj

这会在点击标签时将图标移动到顶部。您的第一个解决方案的行为更好，因为在编辑文本时铅笔图标不可见。 – hering

我想你想你标记 CSS图标后浮动：

i {float:left}

来源

2017-03-21 09:47:15 KornholioBeavis

当p-tag的宽度为73％时，不会认为这会起作用。我想铅笔图标应该在包含的文本旁边，而不是在p标签旁边。 – hering

只需提供display: inline-block您.p_class类。

这将让你的.p_class DIV不占据容器的整个宽度，和你.fa-pencil图标是display: inline-block默认.p_class后会占用空间。

.p_class { 
    display: inline-block; 
}

来源

2017-03-21 09:47:40 nashcheez

以下添加到CSS：

.p_class{ 
    display:inline-block 
}

来源

2017-03-21 09:47:48

试着这么做： .p_class { float: left; }

来源

2017-03-21 09:49:45

您可以添加显示：inline-block的类 “p_class”

来源

2017-03-21 09:50:45 SreenathPG

只需添加以下课程

#txtUserStatus{ 
    display: inline-block; 
}

来源

2017-03-21 09:54:50 Maharshi

如果你想在<p>后，你的图标做：

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

来源

2017-03-21 09:56:07 Rob

回答

相关问题