Question

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

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

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

我的问题是，小部件顶部的“你的实习”的边界在其子菜单完成之前不会出现，即在“住宿”之上。但我想直接在“你的实习”下面，就像菜单页面的其他部分一样。所以基本上它接近整个li。我理解为什么会发生这种情况，我唯一可以绕过它的方法是在ul li a下面放一个边框，但问题是这最终会非常混乱，因为控制边框的宽度等等（使用padding等）。

有没有人建议如何将边框应用到第一个链接？

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

我在这里问第二个问题以及我猜我的整体问题与从wordpress设计小部件的特定部分有关。

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

Answer 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;
}

Demo

Answer 2

它可能比你想要的有点麻烦，但这是一个建议。

要直接在“您的实习”下面划线（但仍然保持在“您的住宿”之上），您可以执行以下操作：

#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;
}

将样式添加到无序列表的不同部分，wordpress小部件

2 个答案: