javaweb 中使用bootstrap框架,下拉菜单添加分割线

项目中使用到了bootstrap框架下的下拉插件,当设置分割线时,由于需要鼠标移到上面显示背景,添加p不知道什么原因,会显示空格,导致有一部分无法改变背景,很丑,
后来来浏览器端调试发现,在行li添加的p会被框架识别,里面会有默认的样式有一个10px的高度,修改这个高度即可.
<div class="btn-group ">
<button class="btn dropdown-toggle light-grey green"
data-toggle="dropdown">
<i class="icon-wrench"></i>&nbsp;工具
</button>
<ul class="dropdown-menu" style="width:50px">
<li style="text-align:left"><p id="details-in">
<i class="icon-signin" style='cursor:pointer'>&nbsp;&nbsp;&nbsp;&nbsp;导入</i>
</p></li>
<li class="divider backcolor"></li>
<!-- 分割线 -->
<li style="text-align:left"><p id="table-out"
οnclick="toExcel('sample_1');">
<i class="icon-upload-alt" style='cursor:pointer'>&nbsp;&nbsp;&nbsp;&nbsp;导出</i>
</p></li>
<!-- <li class="divider"></li> -->
<!-- <li style="text-align:left"><p class="light-grey green"
id="wages-export-pdf">
<i class="icon-external-link">&nbsp;&nbsp;&nbsp;&nbsp;导出工资条</i>
</p></li> -->
</ul>
</div>

2.自定义的sytle.css,设置鼠标悬停上面的背景颜色效果如下:


.dropdown-menu li > p:hover, 
.dropdown-menu .active > p, 
.dropdown-menu .active > p:hover {
  text-decoration: none;
  background-image: none;
  background-color: #eee;
  color: #333;
  filter:none;
}


3.这时候如要多出的分割线的空格,可以在这个导入的css文件里面进行调整:bootstrap.min.css
.dropdown-menu .divider {
*width: 100%;
height: 1px;
margin: 0px 0px;
*margin: -1px 0 1px;  //这里也可以设置下拉的每行的高度
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff
}


这里是关键:
p {
margin: 0 0 10px   //10px改为0,就可以设置p的间隔为0,也就不会显示出很丑的分割空格了
}