如何在菜单下拉框中添加分隔符

时间:2016-10-12 09:33:24

标签: javascript jquery html css css3

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

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

但是这段代码不起作用,因为我看不到分隔符。有人可以帮帮我吗?

2 个答案:

答案 0 :(得分:0)

您的代码中存在问题{li}

后会额外添加'

&#13;
&#13;
ul, li{list-style:none}
.divider{border-bottom:1px solid red}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你是android编程吗?如果是,您可以转到xml文件找到 listview 并添加此行           android:divider:#ffffffff

"#ffffffff"可以替换为您喜欢的任何颜色的十六进制代码