我正在try 创建一个菜单栏，其中的元素在悬停时会向上移动，但它只有在父容器包含恰好一个元素时才起作用(如标题栏右，而不是标题栏左).其他属性(本例中的字体系列)按预期更改.我已try 删除过渡持续时间，但不能解决问题.下面是我认为的最起码的可重现的例子.
#title-bar-left {
justify-content: left;
align-items: left;
float: left;
height: inherit;
}
#title-bar-right {
justify-content: right;
align-items: right;
float: right;
height: inherit;
}
.title-bar-element-container {
height: 100%;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
transition-duration: 0.3s;
}
.title-bar-element-container:hover {
margin-top: 10px;
height: 100%;
font-family: monospace;
transition-duration: 0.3s;
}<div id="title-bar">
<flex id="title-bar-left">
<flex class="title-bar-element-container">
<a class="title-bar-element bold-text" href="/main.html">main</a>
</flex>
<flex class="title-bar-element-container">
<a class="title-bar-element" href="/category1.html">Category 1</a>
</flex>
</flex>
<flex id="title-bar-right">
<flex class="title-bar-element-container">
<a class="title-bar-element" href="/category2.html">Category 2</a>
</flex>
</flex>
</div>