自动增加高度（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）

回答

相关问题