显示：内联块未按预期工作[重复]

Question

这个问题在这里已经有了答案：

将内联块 DIV 对齐到容器元素的顶部4 个答案

为什么这个 inline-block 元素被向下推？ (8 个回答)

6 个月前关闭。

我在页面中有两个 div：一个在左侧称为“菜单”，另一个在右侧称为“内容”，左侧 div 内有两个子项。

html：

<div>
  <div class="menu">
    <div class="menu-item">
      menu1
    </div>
    <div class="menu-item">
      menu2
    </div>
  </div>
  <div class="content">
    some content
  </div>
</div>

css：

div{
  border-style:solid;
}

.menu{
  display:inline-block;
}

.content{
  display:inline-block;
}

（jsfiddle： https://jsfiddle.net/ds81vtrp/2/ ）

我需要水平对齐“菜单” div 和“内容” div，所以我使用 display: inline-block，但结果很奇怪，“内容” div 放置在底部子项的右侧（即“ menu2" div)，而不是父级（即"menu" div），为什么？

我需要的：

Answer 1

您需要为它们分配vertical-align: top

 .container { border: solid 2px red; }.container > * { display: inline-block; vertical-align: top; border: solid 2px blue; }

 <div class="container"> <div class="menu"> <div class="menu-item"> menu1 </div> <div class="menu-item"> menu2 </div> </div> <div class="content"> some content </div> </div>

---

仅供参考，在这里使用flexbox是一种更好的做法，因为您可以摆脱内联块之间烦人的空白，并且还可以自由对齐它们，例如使内容水平占据空间的 rest：

 .container { display: flex; align-items: flex-start; border: solid 2px red; }.container > * { border: solid 2px blue; }.content { flex: 1; }

 <div class="container"> <div class="menu"> <div class="menu-item"> menu1 </div> <div class="menu-item"> menu2 </div> </div> <div class="content"> some content </div> </div>

Answer 2

尝试使用垂直对齐

The vertical-align property sets the vertical alignment of an element.

你可能需要：顶部

top– Align the top of the element and its descendants with the top of
the entire line.

垂直对齐：顶部；