css - 如何将 Font Awesome 扩展菜单指示器直接放置在菜单文本旁边？

Question

在这个网站上工作: https://voyagers.wildapricot.org/

试图让菜单导航项(表示有子页面)右侧的 Font Awesome 箭头立即显示在文本的右侧，而不是在文本和箭头之间留出巨大的空间。

非常感谢任何帮助，谢谢!

Answer 1

从技术上讲，您可以这样做:

第 1 步:在以下 CSS 规则中，将 display 值更改为 inline-block。

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: top;
white-space: nowrap;
position: relative;
font: normal 18px/26px Oswald, Helvetica, sans-serif;
overflow: hidden;
}

第 2 步:在以下规则中，将 right-padding 更改为 15px(padding 规则中的第二个值)。

.WaGadgetMenuHorizontal.menuStyle004 .menuInner ul.firstLevel > li > .item > a > span {
 padding: 15px 15px 15px 10px;
 ...
 }

第 3 步:在下面，将 right 偏移更改为 0(或等同于 0px)。

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after {
content: "\f107";
font-family: FontAwesome;
color: white;
position: absolute;
display: inline-block;
top: 15px;
right: 0px;
}

我假设您可以访问内容管理系统(网站构建平台)中的所有 CSS 样式表。

如果没有，您需要添加这些规则来覆盖预先存在的规则，因此您需要先了解如何执行此操作。您可能需要从托管的技术支持人员那里获得帮助。

注意:我使用 Firefox 访问了您的网站，检查了各种元素并尝试了这三个步骤，结果成功了。确保查看其他主要浏览器(Chrome 和 IE)。

请记住，这些更改会改变导航的整体外观，因此您可能会产生其他可能不适合您的设计的视觉副作用。

旁白:问题中的 HTML 如下所示(我省略了一些包装 div):

<ul style="" class="firstLevel">
  <li class="sel">
    <div class="item"><a href="https://voyagers.wildapricot.org/" title="Home"><span>Home</span></a></div>
  </li>
  <li class="">
    <div class="item"> <a href="https://voyagers.wildapricot.org/Coop" title="Coop"><span>Coop</span></a> </div>
  </li>
  <li class="dir">
    <div class="item"><a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center"><span>Resource Center</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item"><a href="https://voyagers.wildapricot.org/page-1075491" title="Home (Demo)"><span>Home (Demo)</span></a></div>
        </li>
      </ul>
    </div>
  </li>
  <li class="">
    <div class="item"> <a href="https://voyagers.wildapricot.org/Events" title="Events"><span>Events</span></a> </div>
  </li>
  <li class="dir">
    <div class="item"> <a href="https://voyagers.wildapricot.org/About-Us" title="About Us"><span>About Us</span></a>
      <ul class="secondLevel">
        <li class=" ">
          <div class="item"> <a href="https://voyagers.wildapricot.org/Donate" title="Donate"><span>Donate</span></a> </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="last-child">
    <div class="item"> <a href="https://voyagers.wildapricot.org/Volunteer" title="Volunteer"><span>Volunteer</span></a> </div>
  </li>
</ul>