这就是它的样子。

我需要使图标和文本在同一行上并且彼此靠近，我尝试使用display: inline-block;但它不起作用，这是我的代码。

HTML：

<代码><；DIV类名="；注释_图标<；IMG SRC={studenticon}alt="；studenticon"；类="；学生_图标"；>；<；/IMG>；<；DIV类名称="；注释"；>；5类注释<；/DIV>；<；/DIV>；

CSS：

<代码>.学生_图标{高度：1VW；宽度：1VW；显示：inline-block；}.iContext{填充-顶部：0.8VW；字体大小：1.5VW；}.评论{字体大小：2.5VW；显示：inline-block；}

顺晟科技：

<代码>.学生_图标{浮动：左；填充-右：10px；}.iContext{填充-顶部：0.8VW；字体大小：1.5VW；}.评论{字体大小：2.5VW；显示：inline-block；}

<代码><；DIV CLASSNAME=“注释_图标”>；<；IMG SRC=https：//via.placeholder.com/20类=“学生_图标”>；<；/IMG>；<；DIV CLASSNAME=“ COMMENTS ”>；5类注释<；/DIV>；<；/DIV>；

我使用了<div className="Comment_Icon"> <img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img> <div className="Comments">5 Class Comments</div> </div>

<代码><；DIV类=“注释_图标”>；<；IMG SRC=“ https：//hipsiti.com/uploads/default-profile.png ” alt=“ StudentEnticon ” Class=“学生_图标”/>；<；SPAN CLASS=“ COMMENTS ”>；5类注释<；/SPAN>；<；/DIV>；

使用Flex，如下所示

<代码>.iContext{填充-顶部：0.8VW；字体大小：1.5VW；}.评论{字体大小：2.5VW；显示：inline-block；}.comment_图标{显示：Flex；flex-direction：行；align-items：居中；}.学生_图标{Margin-Right：3px；}

<代码><；DIV类=“注释_图标”>；<；IMG SRC={studenticon}alt=“ studenticon ” Class=“学生_图标”>；<；/IMG>；<；DIV类=“注释”>；5类注释<；/DIV>；<；/DIV>；