Question

我正在做一些CSS并遇到一个奇怪的问题。两个元素inline-block停留在同一个容器中。它们都有width，height和line-height。

但是如果我们将第一个元素设置为空内容，则布局将会混乱（垂直对齐）。

您可以看到问题here

<div class="part">
  <div class="foo"></div>
  <div class="bar">bar</div>
</div>

.part {
  width: 400px;
  height: 80px;
  background-color: #ddd;
  margin-bottom: 100px;
}
.foo {
  display: inline-block;
  width: 100px;
  height: 80px;
  line-height: 80px;
  background-color: red;
}
.bar {
  display: inline-block;
  width: 100px;
  line-height: 80px;
  height: 80px;
  background-color: green;
}

我知道空内容始终是html代码的难闻气味。但我只想知道为什么会这样，以及如何解决这个问题。

我找到了similar question。人们说我们可以使用&nbsp而不是空内容。这是我们解决它的唯一方法吗？或者我们有其他更好的解决方案？

感谢。

Answer 1

使用'vertical-align：middle;'到内联块元素
vertical-align: middle;
http://jsbin.com/ajexab/1/edit

内容为空的内联块会使布局无序（垂直对齐）？

1 个答案: