Question

我想通过一个简单的实心分隔符来分隔下拉菜单选项中的某些元素。理想情况下，我希望有链接＆＃39; Pinterest＆＃39; Twitter＆＃39; Twitter＆＃39; Bloglovin＆＃39;和＆＃39; Instagram＆＃39;显示在此分隔符上方和链接“电子邮件”＃39;出现在分隔线下方。所以基本上我用分隔符将前半部分链接与后半部分分开。

下面是下拉菜单中的html编码：

<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:blankesque@hotmail.com'>Email</a></li>

</ul></li>

指向我网站的链接如下 - http://www.blankesque.com。

对此问题的任何帮助将不胜感激。提前谢谢。

IRAM

Answer 1

只需定位社交<li>中的最后一个<li>（我为其添加了课程.social），:last-of-type并添加了一个border-top

.social li:last-of-type {
  margin-top: 10px;
  border-top: 1px solid grey;
}

<li class="social"><a href="#">Social</a>
  <ul>
    <li><a href="http://www.pinterest.com/blankesque">Pinterest</a></li>
    <li><a href="http://www.twitter.com/itsblankesque.com">Twitter</a></li>
    <li><a href="http://www.bloglovin.com/people/aladyinwhite-8315551">Bloglovin</a></li>
    <li><a href="http://www.instagram.com/blankesque/blankesquexo">Instagram</a></li>
    <li><a href="mailto:blankesque@hotmail.com">Email</a></li>
  </ul>
</li>

如何在下拉菜单中使用分隔符分隔元素？

1 个答案: