如何修复这些 <div> 元素的对齐错误和悬停错误？

Question

当我将鼠标悬停在这两个元素上时，我试图使<div>它们对齐，但到目前为止还没有奏效。我尝试过使用display: inline-block，但它仍然不起作用，如图所示。代码中的另一件事是悬停区域是错误的。关于如何解决这些问题有什么想法吗？这是我的代码：

/* Please note that this is updated CSS and not

 * the original */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');

* {

  font-family: "Montserrat", sans-serif;

  background-color: #121212;

  transition: 0.5s;

  overflow: hidden;

}

#c {

  position: absolute;

  left: calc(4vw + 4vh);

  top: calc(4vw + 4vh);

  transition: 0.5s;

  display: inline-flex;

  cursor: default;

  /* V3 of the CSS */

  overflow: hidden;

}

#ct {

  overflow: hidden;

  width: 0;

  top: 0;

  left: 0;

  right: 0;

  transition: 0.5s ease;

  /* display: inline-block; Removed in Revision 3 */

}

#c:hover #ct {

  width: 100%;

}

#ct span {

  white-space: nowrap;

  transition: inherit;

  display: inline-block;

  font-size: calc(2vw + 2vh);

  color: rgb(100, 100, 100);

  padding-top: 3.5px;

}

#h {

  position: relative;

  display: inline-block;

  transition: 0.5s;

  font-size: calc(2vw + 2vh);

  color: rgb(100, 100, 100);

  background: rgb(50, 50, 50);

  padding: 3.5px;

  border-radius: 5px;

}

<div id='c'>

  <div id='ct'>

    <span>lorem ipsum dolor...&nbsp;&nbsp;</span>

  </div>

  <span id='h'>?</span>

</div>

<div>更新：使用和修复了对齐错误<span>，但悬停错误仍然存在。更新2：错误已完全修复。谢谢兹德拉夫科·佩尔尼科夫！

Answer 1

使用display: inline-flexin#c和 addalign-items: center可以垂直对齐它们。对于悬停 - 添加和overflow: hidden删除并更改为display: inline-block;#c#ctwidth: 0%width: 0