javascript - 如何在菜单保管箱中添加分隔符

Question

我需要在我的下拉菜单中添加一个分隔符，所以我使用以下代码:

<li class='divider'></li>

这是我的带有分隔符的 html 代码:

<ul class="dropdown-menu dropdown-menu-right" id="ul_menu">
  <li>
    <div class="col-md-10">
      <input type="checkbox" name="aggiungidsfsdf" checked=""> dsfsdf
    </div>
    <div class="col-md-2"><i class="fa fa-universal-access fa-1" aria-hidden="true"></i></div>
  </li>
  <li>
    <div class="col-md-10">
      <input type="checkbox" name="aggiungiasdas"> asdas
    </div>
    <div class="col-md-2"><i class="fa fa-universal-access fa-1" aria-hidden="true"></i></div>
  </li>
  <li>
    <div class="col-md-10">
      <input type="checkbox" name="aggiungicollaborativo"> collaborativo
    </div>
    <div class="col-md-2"><i class="fa fa fa-users fa-1" aria-hidden="true"></i></div>
  </li>
  <li>
    <div class="col-md-10">
      <input type="checkbox" name="aggiungiprivato"> privato
    </div>
    <div class="col-md-2"><i class="fa fa-lock fa-1" aria-hidden="true"></i></div>
  </li>
  <li>
    <div class="col-md-10">
      <input type="checkbox" name="aggiungicollabborativo"> collabborativo
    </div>
    <div class="col-md-2"><i class="fa fa fa-users fa-1" aria-hidden="true"></i></div>
  </li>
  <li class="divider"></li>
  <li>
    <a href="#" id="aggiungi_bookmarked"><i class="fa fa-fw fa fa-plus"></i>Aggiungi Bookmarked</a>
  </li>
</ul>

但是这段代码不起作用，因为我没有看到分隔符。谁能帮帮我？

Answer 1

你的代码有问题 '额外添加在 li 之后。

ul, li{list-style:none}
.divider{border-bottom:1px solid red}

<ul class="dropdown-menu dropdown-menu-right" id="ul_menu">
  <li><div class="col-md-10"><input type="checkbox" name="aggiungidsfsdf" checked="">   dsfsdf</div><div class="col-md-2"><i class="fa fa-universal-access fa-1" aria-hidden="true"></i></div></li>
  <li><div class="col-md-10"><input type="checkbox" name="aggiungiasdas">      asdas</div><div class="col-md-2"><i class="fa fa-universal-access fa-1" aria-hidden="true"></i></div></li>
  <li><div class="col-md-10"><input type="checkbox" name="aggiungicollaborativo">       collaborativo</div><div class="col-md-2"><i class="fa fa fa-users fa-1" aria-hidden="true"></i></div></li>
  <li><div class="col-md-10"><input type="checkbox" name="aggiungiprivato">     privato</div><div class="col-md-2"><i class="fa fa-lock fa-1" aria-hidden="true"></i></div></li><li><div class="col-md-10"><input type="checkbox" name="aggiungicollabborativo">        collabborativo</div><div class="col-md-2"><i class="fa fa fa-users fa-1" aria-hidden="true"></i></div></li>
  <li class="divider"></li'><li><a href="#" id="aggiungi_bookmarked"><i class="fa fa-fw fa fa-plus"></i>Aggiungi Bookmarked</a></li></ul>