Question

我遇到一个问题，让图标直接显示在ul中的列表项之后使用字体awesome和：after。

具有活动类的li应该在其后面有图标但是在关闭列表项之前添加了另一个ul时，它会将图标放在整个辅助列表之后。

<div id="thirdLevMenu">
<ul>
<li class="active">Integrated Coastal Watershed Management Plans
<ul>
<li><a href="http://design-irwmp3.migcom.com/app_pages/view/7931">Russian River Integrated Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.goldridgercd.com/watersheds/salmoncreekplan.html" target="_blank">Salmon Creek Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.mattole.org/plan" target="_blank">Mattole Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.trinidad.ca.gov/documents-library/category/30-icwmp.html" target="_blank">Trinidad-Westhaven Coastal Watershed Management Plan</a></li>
</ul>
</li>
</ul>
</div>

我不能为我的生活弄清楚我做错了什么。

Here's my jsfiddle

提前致谢!!

Answer 1

正如我在评论中提到的那样：

“当您在顶部<ul>内添加第二个<li>时，整个内部列表将成为父列表项的一部分。它正在执行您正在告诉它的内容，它正在放置箭头直接在<li>之后。“

如果您希望图标显示在“沿海流域综合管理计划”的文本之后，请在该标题周围添加一个范围并调整CSS以将:after伪元素添加到该范围而不是整个<li>。

HTML

<li class="active">
 <span class = "title">Integrated Coastal Watershed Management Plans</span>

 ...
</li>

CSS

#thirdLevMenu ul li.active .title:after{ 
   content: '\f0da';
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   margin:0px 0px 0px 10px;
   text-decoration:none;

}

Here's an updated fiddle.

在列表项后添加一个图标：after和font awesome

1 个答案: