Question

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            height: 400px;
            min-width: 200px;
            display: inline-block;
            border: 1px solid grey;
        }
        .item{
            border: 1px solid grey;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container"><div class="item" style="display: none;">123</div></div>
    <div class="container"><div class="item">123</div></div>
    <div class="container"><div class="item">123</div></div>
</body>
</html>

＆＃13;

问题是当我添加style =＆＃34; display：none;＆＃34;到第一项，容器不显示内联。当我删除display：none时，它没问题。谁能告诉我为什么？

Answer 1

实际上，我不知道确切的答案，但我可以为您提供解决方案：

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            height: 400px;
            min-width: 100px;
            display: inline-block;
            border: 1px solid grey;
        }
        .item{
            border: 1px solid grey;
            margin: 5px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container"><div class="item" style="display: none;">123</div></div>
    <div class="container"><div class="item">123</div></div>
    <div class="container"><div class="item">123</div></div>
</body>
</html>

＆＃13;

Answer 2

您可以将display:none更改为visibility:hidden，然后就可以了。

这可以作为解决方案：HERE - 默认对齐方式是基线，div中没有任何内容，没有基线。如果你添加vertical-align：top，你就克服了这一点。这就是我的“解决方案”在上面工作的原因 - visibility：hidden使元素内联 - 而display：none将其从流中取出。

Answer 3

试

.item{
  border: 1px solid grey;
  margin: 5px;
}

为：

.item{
  border: 1px solid grey;
  margin: 5px;
  float:left
  }

http://jsfiddle.net/djrr93wq/

为什么将display：none设置为inline-block div内的元素，使得inline-block不会呈现为内联块;

3 个答案: