Div 大于其内容答案

【问题标题】：Div is larger than its contentsDiv 大于其内容
【发布时间】：2017-05-12 19:19:31
【问题描述】：

我正在尝试将内容放在此数据表分页控件下方，但 div 大于其内容。这使我的内容比我想要的还要低。

<div id="wrapper">
  <div style="display:inline;" class="col-sm-6 col-md-6 pt-3">
    <div class="dataTables_paginate paging_simple_numbers" id="crfTable_paginate">
    <ul class="pagination">
      <li class="paginate_button previous disabled" id="crfTable_previous">
        <a href="#" aria-controls="crfTable" data-dt-idx="0" tabindex="0">Previous</a>
      </li>
      <li class="paginate_button active">
        <a href="#" aria-controls="crfTable" data-dt-idx="1" tabindex="0">1</a>
      </li>
      <li class="paginate_button next disabled" id="crfTable_next">
        <a href="#" aria-controls="crfTable" data-dt-idx="2" tabindex="0">Next</a>
      </li>
    </ul>
    </div>
  </div>
</div>

以及相关的数据表css：

div.dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
}

div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
}

我一直在 chrome 和 firefox 调试器中四处寻找导致这种情况的样式，但它只是说元素的高度是 43 像素而不是 38 像素（来自 ul 的 34 像素，带有2 上下边距）应该是。

对造成这种情况的原因有什么想法吗？为什么会失去收缩包装效果？

我尝试在容器 div 和 max-height:38 中添加内联块和内联块，但没有删除额外的 5px。

【问题讨论】：

标签： html twitter-bootstrap-3 datatables

【解决方案1】：

你应该写如下

line-height 属性定义内联元素上方和下方的空间量。

div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    line-height: 10px;
}

【讨论】：

这并没有解决问题。
不过，你走在正确的轨道上。我回去并将行高应用于 div.dataTables_paginate 而不是 ul，并且修复了它。
在来自Selectize 的.selectize-control div 上有同样的问题。 div 的高度比其内容大 5 px。 line-height 诡计奏效了！谢谢！

【解决方案2】：

首先对于您的col-sm-6 col-md-6 pt-3 div，您需要删除该display: inline。对于ul.pagination 设置为display: block：

<div id="wrapper">
  <div class="col-sm-6 col-md-6 pt-3">
    <div class="dataTables_paginate paging_simple_numbers" id="crfTable_paginate">
    <ul class="pagination" style="display:block">
      <li class="paginate_button previous disabled" id="crfTable_previous">
        <a href="#" aria-controls="crfTable" data-dt-idx="0" tabindex="0">Previous</a>
      </li>
      <li class="paginate_button active">
        <a href="#" aria-controls="crfTable" data-dt-idx="1" tabindex="0">1</a>
      </li>
      <li class="paginate_button next disabled" id="crfTable_next">
        <a href="#" aria-controls="crfTable" data-dt-idx="2" tabindex="0">Next</a>
      </li>
    </ul>
    </div>
  </div>
</div>

包括您的保证金设置，您将从引导程序中覆盖 20px 0

【讨论】：

这删除了多余的空间，但 ul 边距在 ul 元素上方堆叠。不过，我也许可以使用它。
好吧，你在 .pagination 上的maring: 2px 0 消除了很大的差距。
是的，它将边距从 20 减少到 2，但是 display:block 将 ul 拉出边距，因此您不再看到底部边距，因为它与 ul 元素重叠。我必须将 2px 边距覆盖为 0 并将边距应用于 div，这可能没问题。我们会看到