Question

<ul class="nav navbar-nav pull-right" style="margin-right: 25px;" >
                 <li><a href="#"> My Profile </a></li>
                 <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  My Blog <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Sports</li></a>
                        <li class="divider"></li>
                         <li><a href="#">Foods</li></a>
                         <li class="divider"></li>
                          <li><a href="#">Entertainment</li></a>
                          <li class="divider"></li>
                           <li><a href="#">Travel</li></a>
                  </ul>
                  </li>

how to delete the padding on my dropdown-menu list because its destroying the background color i put in there. This is the image of my current dropdown-list which having some problem on padding:

Answer 1

以下是一些事情

不正确的html结构

<li><a href="#">Foods</li></a>

将其更改为

<li><a href="#">Foods</a></li>

向我们展示li，a和.divider的风格哪一个使用背景：＃809109;

我猜你需要删除li的填充

.dropdown-menu > li{
    padding:0px
}

或者您也可以为li添加背景颜色

.dropdown-menu > li{
    background-color:#809109;
}

Answer 2

尽管问题陈述不完整，并且html语法错误，但是如果没有这些问题，仍然会发生此问题。问题出在插入分隔线或水平线，无论使用什么分隔线。对于这些，“无序列表”标记添加了其他填充，这种情况可能是这种情况。您可以使用此答案中提到的一种方法来解决您的问题：

Remove padding from unordered list

如何删除下拉菜单列表中的填充<a>?

2 个答案: