自动增加高度（html，CSS）

Question

对于这篇文章中最具创造性的标题，我很抱歉，但我不知道如何用文字表达。

我创建了一个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>

它工作正常，但问题是当我将鼠标移动到div类#itemcard时它延伸了DIV的高点

我希望我能解释得很好，这里有一些截图

鼠标悬停

之前

现在 鼠标悬停

我们可以看到按钮正在显示，但它创建了一个更大的GAP（在屏幕截图中显示为红线）。

我怎么能不发生这种情况并保持高度一致？我不想限制DIV的高度，因为如果DIV有更多的数据要显示，我会把它运行到更多的问题

是否可以将DIV渲染到大小＆＃34;之前＆＃34; #options转为显示：无？

干杯

Answer 1

如果您不想看到高度的差异，那么最好在鼠标悬停时使用visibility: hidden和visibility: visible。 visibility: hidden默认保留div的高度。

Answer 2

可以有很多选项来解决您的问题。但最好的情况是，如果您使用visibility:hidden/visible代替display:none/block。

Answer 3

您必须查看Inspector并检查div的悬停高度。固定高度不是必须意味着将被修复。你没有提供CSS所以我无法提供帮助。

Answer 4

尝试以下方法：   - 减小图像尺寸。   - 删除图像上的额外边框。 这可能会解决这个问题。

Answer 5

我认为最好的选择是将display: none;替换为visibility: hidden;，将display: block;替换为visibility: visible;此方法默认保留div的高度。< / p>

这是一个简单的实现。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;