Question

我有一个解决我的问题的方法，但这似乎不对。我想知道发生了什么。

嵌套列表项的背景颜色不会延伸到底部，即使它没有边距（请参阅屏幕截图中蓝色背景下方的间隙）。里面的段落确实有一个保证金。但我试图在我的app（使用Bootstrap）之外重现这个，但我不能。在Firebug中，我尝试关闭除了显示问题所必需的所有CSS（即背景颜色和边框 - 请参见第2张图像），但它没有任何区别。在Chrome和Firefox中看到过。

修复是向内部列表项添加底部填充或overflow-y:auto;。但为什么？有人遇到过这样的事吗？

我不能在这里发布所有代码，但HTML至少是这样的：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown open">
         <ul class="dropdown-menu notification-list">   
                    <li class="notification-new">
                        <div class="text-muted">01/13/2015</div>
                        <p>Check out the new features coming to the 2015.1 release <a href="javascript:void(0)">here</a>!</p>
                    </li>
                    <li class="notification-new">
                        <div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
                        <p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
                    </li>

[更新]这是一个简化的非Bootstrap版本。为什么这个没有差距？

        ul {
            width: 300px;
            border: 1px solid red;
            float: left;
        }

        li.sub {
            border: 1px solid green;
            background-color: yellow;
            padding: 8px 8px 0;
        }

p { margin:10px; /* no gaps with or without this */ }

 <ul>
        <li><p>item 1</p>
            <ul>
                <li class="sub">
                    <div>
                        something
                    </div>
                    <p>
                        stuff
                    </p>
                </li>
                <li class="sub">
                    <div>
                        something
                    </div>
                    <p>
                        stuff
                    </p>
                </li>
            </ul>
        </li>
        <li>thing
            <ul>
                <li class="sub">
                    nuther
                </li>
            </ul>

        </li>
    </ul>

Answer 1

由于p内的li元素中的边距，特别是下边距，因此出现间距。

此行为定义为“折叠边距”。更多信息：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

您可以通过将它们设置为0来查看。

.notification-new p{
  margin:0;
}

实例：http://www.bootply.com/wlfIl3RziC

以下完整代码：

.notification-new {
  background-color:red;
}

.notification-new p{
  margin:0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-right">
  <li class="dropdown open">
    <ul class="dropdown-menu notification-list">   
      <li class="notification-new">
        <div class="text-muted">01/13/2015</div>
        <p>Check out the new features coming to the 2015.1 release <a href="javascript:void(0)">here</a>!</p>
      </li>
      <li class="notification-new">
        <div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
        <p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
      </li>
    </ul>
  </li>
</ul>

列表项的全高背景色需要填充还是溢出？

1 个答案: