Question

我遇到了这个问题：https://jsfiddle.net/xfpfjqw0/

header .logo {
  display: inline-block;
  height: 150px;
  width: 40%;
}
header .search {
  display: inline-block;
  height: 150px;
  width: 40%;
}

<header>
  <div class="logo"></div>
  <div class="search">
    <form action="/search/" method="get">
      <input type="text" name="q">
      <input type="submit" value="Search" class="btn">
    </form>
  </div>
</header>

这是我正在建设的网站的摘录。如果你检查这两个元素，你会看到第一个元素从左上角开始，第二个元素在第一个元素的右下角开始。

为什么会这样？

Answer 1

这是因为您必须指定元素的vertical-align才能更改对齐方式。默认值为baseline，但您可以更改它，例如top，middle，bottom

Like this

在此处查看对此更大的解释： Why is this inline-block element pushed downward?

Div没有紧挨着另一个

1 个答案: