0

我认为描述我的问题的最佳方式是向您展示。

http://yourinternship.hailstormcommerce.com/?page_id=21

在左侧的侧边栏上，有一个使用 的小部件，ul当我将 abottom-border应用于第一个时li，然后为任何孩子关闭边框li。

我的问题是，小部件顶部的“您的实习”边框直到其子菜单完成后才会出现，即在“住宿”上方。但我希望它直接位于“Your Internship”下方，就像其他菜单页面一样。所以基本上它与整个li. 我理解为什么会发生这种情况，我能够绕过它的唯一方法是在下面放置一个边框，ul li a但问题是这最终会变得非常混乱，用于控制边框的宽度等（使用padding等）。

有人对我如何将边框应用于第一个链接有任何建议吗？

另外，在同一张纸条上，是否可以删除“联系我们”下的最后一个边框？

我在这里问第二个问题，我想我的整体问题与从 wordpress 中设置小部件的特定部分有关。

提前感谢您的帮助。任何问题让我知道，因为我可能让这听起来令人困惑。干杯

4

2 回答 2

1

这是可能的。我做了一个简化的例子，你可以从中学习：

<ul class="widget">
  <li class="active">Your Internship
    <ul>
      <li>Benefit of our program</li>
      <li>Students</li>
      <li>University</li>
      <li>Why Choose Us</li>
      <li>Your Internship Process</li>
      <li>Your Language Course</li>
    </ul>
  </li>
  <li>Your Accomodation</li>
  <li>Your Employers</li>
  <li>Information for Interns</li>
  <li>Apply Now</li>
  <li>Contact Us</li>
</ul>

要摆脱活动和最后一个项目的边框，请使用以下伪选择器：

.widget > li:last-child, .active {
  border: none;
}

为了在 " " 类上重新添加边框active，我使用了一个伪元素：

.active:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 25px;
  border-bottom: 2px solid salmon;
}

演示

于 2012-10-18T22:47:09.303 回答
1

它可能比你想要的有点混乱，但这里有一个建议。

要直接在“Your Internship”下方获取该行（但仍将其保持在“Your Accomdation”上方），您可以执行以下操作：

#menu-your-internship-sidebar .current_page_parent > a {
    display: block
    border-bottom: solid 1px #DDD;
 }

要删除“联系我们”下的最后一个边框，只需将 li:last-child 底部边框设置为 0，如下所示：

#menu-your-internship-sidebar li:last-child {
    border: none
}

编辑：如果您想删除“您的住宿”上方的边框：

#menu-your-internship-sidebar > li.current-page-parent {
    border: none;
}
于 2012-10-18T22:54:47.483 回答