Question

在此网站上工作： https://voyagers.wildapricot.org/

尝试将菜单导航项右侧的字体精彩箭头（表示有子页面）显示在文本右侧，而不是文本和箭头之间的巨大空间。< / p>

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

Answer 1

我进行了重组，以便它可以运作，但你必须适应你的情况

.dir {
  height: 40px;
  width: 100%;
  }
.item {
  width: inherit;
  height: inherit;
  }
a {
  background: blue;
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  }
a:hover {
  background: red;
  cursor: pointer;
  }
span {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
span:after {
  content:"<";
  position: absolute;
  right: -20px;
  }

<li class="dir">
	<div class="item">
		<a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center">
          <span>Resource Center</span>
      </a>
</div>
</li>

Answer 2

从技术上讲，这就是你要做的事情：

第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：在以下规则中，将右边距填充更改为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;
}

我假设您可以访问内容管理系统（Web构建器平台）中的所有CSS样式表。

如果没有，您需要添加这些规则以覆盖预先存在的规则，因此您需要先了解如何执行此操作。您可能需要向您所在的技术支持人员寻求帮助。

注意：我使用Firefox访问了您的网站，我检查了各种元素并尝试了这三个步骤，这就是诀窍。确保查看其他主要浏览器（Chrome和IE）。

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

旁白：问题中的HTML如下所示（我省略了一些包装div＆＃39; s）：

<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>

如何将字体真棒扩展菜单指示符直接放在菜单文本旁边？

2 个答案: