Div比它的內容大

我試圖把內容放在這個datatables分頁控件下面，但div比它的內容大。這使我的內容比我想要的更進一步。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; 
}

我已經在這兩個鉻被戳，和Firefox調試器試圖尋找這是造成這一種風格，但它只是說該元素的高度是43像素，而不是38個像素（34個來自ul，上下有2個距離）。

有什麼想法是什麼導致這個？爲什麼它會失去縮水效果？

我試過添加內聯，以及內聯塊到容器div和最大高度：38，但沒有任何東西已經刪除了額外的5px。

來源

2017-05-12 avatarofhope2

你應該如下寫

的line-height屬性定義的量空間上方和下方的內聯元素。

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

來源

2017-05-12 19:54:28 AvrilAlejandro

這並沒有解決小提琴。 – avatarofhope2

儘管如此，你還是處於正確的軌道上。我回去並將line-height應用於div.dataTables_paginate而不是ul，並修復了它。 – avatarofhope2

首先對於你的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

來源

2017-05-12 19:30:24

這除去額外的空間，但UL餘量ul元素上面堆放。儘管如此，我也許可以繼續努力。 – avatarofhope2

那麼你的'maring：2px 0'上.pagination消除了很大的差距。 –

是的，它將邊距從20減少到2，但顯示：塊將ul拉出邊距，所以您不會再看到底部邊距，因爲它與ul元素重疊。我將不得不將2px邊距覆蓋爲0，並將邊距應用於div，這可能沒有問題。我們會看到 – avatarofhope2

Div比它的內容大

回答

相關問題