Question

我正在尝试将内容放在此数据表分页控件下面，但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。

Answer 1

你应该写如下

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

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

Answer 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

Div大于其内容

2 个答案: