自動增加高度（html，CSS）

對不起，這篇文章最沒有創造力的標題，但我不知道如何把這個話。自動增加高度（html，CSS）

我創建了一個DIV

<div class="pull-right" id="options"> 
    <ul class="list-inline text-right" > 
     <li><button class="btn-link glyphicon glyphicon-tags"></button></li> 
     <li><button class="btn-link glyphicon glyphicon-time"></button></li> 
     <li><button class="btn-link glyphicon glyphicon-heart-empty"></button></li> 
     <li><button class="btn-link glyphicon glyphicon-remove text-danger"></button></li> 
    </ul> 
</div>

我用下面的CSS隱藏和顯示這個DIV鼠標懸停

<style> 
    #options { 
     display: none; 
    } 

    #itemcard:hover #options { 
     display: block; 
    } 
</style>

它工作正常，但問題是，當我移動鼠標to div class #itemcard它擴展了DIV的高度

我希望我解釋得很好，下面是一些截圖

之前鼠標懸停

現在 後鼠標懸停

正如我們所看到的按鈕顯示，但它創造了一個更大的GAP（顯示用紅線在截圖中）。

我怎麼能不這樣做並保持高度一致？我不想限制DIV的高度，因爲如果DIV有更多數據要顯示，我會將其運行到更多問題

是否可以將DIV的大小「BEFORE」呈現爲#options變爲顯示：無？

歡呼聲

來源

2017-10-12 aliusman

有可能是圖標懸停效果使用有稍微增加大小鼠標移到它與事業的高度差。請檢查我不確定，這可能是一個原因。 – Sinto

如果你不想看到身高的差異，那麼最好在鼠標懸停時使用visibility: hidden和visibility: visible。默認情況下，visibility: hidden將保持div的高度。

來源

2017-10-12 06:35:19

謝謝，這個作品 – aliusman

您必須看看Inspector並檢查div的懸停高度。固定高度不是nessesary意味着將被修復。您沒有提供CSS，因此我無法提供更多幫助。

來源

2017-10-12 06:29:15 Baterka

請嘗試以下操作： - 縮小圖像大小。 - 刪除圖像上的額外邊框。這可能會解決這個問題。

來源

2017-10-12 06:35:56

可以有這麼多選項來解決您的問題。但最好的，如果你將使用visibility:hidden/visible而不是display:none/block。

來源

2017-10-12 06:38:41

希望我寫上面的一樣！ –

是的。其實我已經寫了:)當你已經發布:)。 –

我認爲最好的辦法是用visibility: visible;這種方法代替display: none;與visibility: hidden;和display: block;將默認保留div的高度。

這是一個簡單的實現。

#options { 
 
    visibility: hidden; 
 
} 
 

 
#itemcard:hover #options { 
 
    visibility: visible; 
 
} 
 

 
ul.list-inline { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 260px; 
 
    overflow: hidden; 
 
} 
 

 
li { 
 
    display: inline; 
 
    float: left; 
 
} 
 

 
li button { 
 
    display: block; 
 
    text-align: center; 
 
    padding: 10px 16px; 
 
}

<div id="itemcard"> 
 
    Item Card 1 
 
    <div id="options" class="pull-right"> 
 
    <ul class="list-inline text-right"> 
 
     <li><button class="btn-link glyphicon glyphicon-tags">1</button></li> 
 
     <li><button class="btn-link glyphicon glyphicon-time">2</button></li> 
 
     <li><button class="btn-link glyphicon glyphicon-heart-empty">3</button></li> 
 
     <li><button class="btn-link glyphicon glyphicon-remove text-danger">4</button></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div id="itemcard"> 
 
    Item Card 2 
 
    <div id="options" class="pull-right"> 
 
    <ul class="list-inline text-right"> 
 
     <li><button class="btn-link glyphicon glyphicon-tags">1</button></li> 
 
     <li><button class="btn-link glyphicon glyphicon-time">2</button></li> 
 
     <li><button class="btn-link glyphicon glyphicon-heart-empty">3</button></li> 
 
     <li><button class="btn-link glyphicon glyphicon-remove text-danger">4</button></li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2017-10-12 07:23:51 Teocci

自動增加高度（html，CSS）

回答

相關問題